web-dev-qa-db-fra.com

Comment sélectionner tout le contenu entre deux balises dans jQuery

J'ai un document avec des titres et des listes non ordonnées.

Comment puis-je utiliser JQuery pour sélectionner un titre donné (par son nom de classe unique) ET tout le contenu entre ce titre et le titre suivant?

Mise à jour:

Vos suggestions sont excellentes, mais ce n'est pas ce que je recherche. Dans le code ci-dessous, par exemple, je voudrais accéder uniquement au "h1" avec l'ID de "head2" et tout le reste, mais sans inclure le "h1" avec l'id de "head3".

Les exemples jQuery fournis ci-dessus accéderont à tout après la première balise "h" qui n'est pas une balise "h".

... ou corrigez-moi si je me trompe :)

    <h1 id="heading1">...</h1>
        <ul>...</ul>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
    <h1 id="heading2" >...</h1>
        <ul>...</ul>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
    <h1 id="heading3" >...</h1>
        <ul>...</ul>
        <p>...</p>
        <ul>...</ul>
        <p>...</p>
jquerycss-selectorstraversal
57
edt

Deux méthodes en particulier seraient très utiles pour résoudre ce problème: .nextUntil et .andSelf . Le premier récupérera tous les frères et sœurs suivant votre sélecteur, et le second regroupera également tout ce qui correspond à votre sélecteur, vous donnant un objet jQuery qui les inclut tous:

$("#heading2")
    .nextUntil("#heading3").andSelf()
        .css("background", "red");

Cela se traduit par ce qui suit:

enter image description here

71
Sampson

Voici la solution que j'utilise pour mes projets:

sélecteur jQuery

(function ($) {
    $.fn.between = function (Elm0, Elm1) {
        var index0 = $(this).index(Elm0);
        var index1 = $(this).index(Elm1);

        if (index0 <= index1)
            return this.slice(index0, index1 + 1);
        else
            return this.slice(index1, index0 + 1);
    }
})(jQuery);

tilisation

$('body').between($('#someid'), $('#someid2')).each(function () {
    // Do what you want.
});
7
Lasse Espeholt

Oui vous avez raison. Cela évitera seulement le sélecteur souhaité. Peut-être que cela doit être plus détaillé:

$(firstSelector).nextAll().not(secondSelector).not($(secondSelector).nextAll()).text()
2
Ricardo Vega

Peut-être, avec

$(selectorForFirstHeading).nextAll().not(selectorForLastHeading).text()

Pourquoi dois-je utiliser text()? Parce que html() ne renverra que le HTML interne du premier élément de résultat.

1
Ricardo Vega

J'ai l'impression que la réponse acceptée a besoin d'un peu de mise à jour depuis la sortie de jQuery 1.8 et versions ultérieures. .andSelf() est obsolète. À sa place, nous avons .addBack(). Le documentation explique tout ce que vous devez savoir.

1
Thomas

Si vos éléments sont au même niveau, quelque chose comme ceci:

<h1 id="heading1">...</h1>
<ul>...</ul>
<p>...</p>
<ul>...</ul>
<p>...</p>
<h1 id="heading2" >...</h1>

Autrement dit, votre élément de titre suivant n'est pas un enfant d'un élément au même niveau que le premier élément de titre. Vous pouvez essayer ce code:

// This will get all the following siblings of <h1 id="heading1"> except those that are headings themselves
var elements = $('#heading1').nextAll().not("h1");
0
disc0dancer