prev - parents jquery

Cómo seleccionar todo el contenido entre dos etiquetas en jQuery

Question

Tengo un documento con encabezados y listas desordenadas.

¿Cómo puedo usar JQuery para seleccionar un título dado (por su nombre de clase único) Y todo el contenido entre ese encabezado y el siguiente?

Actualizar:

Tus sugerencias son geniales, pero no son lo que estoy buscando. En el siguiente código, por ejemplo, me gustaría acceder solo al "h1" con el id de "heading2" y todo hasta, pero sin incluir el "h1" con id de "heading3".

Los ejemplos de jQuery proporcionados arriba accederán a todo después de la primera etiqueta "h" que no es una etiqueta "h".

... o, corrígeme si estoy equivocado :)

    <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>

Answer 1

Aquí está la solución que uso para mis proyectos:

selector 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);

Uso

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

Answer 2

Dos métodos en particular serían muy útiles para resolver este problema: .nextUntil , y .andSelf . El primero atrapará a todos los hermanos que sigan a tu selector, y este último agrupará todo lo que coincida con tu selector, dándote un objeto jQuery que los incluye a todos:

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

Esto resulta en lo siguiente:

Answer 3

Quizás, con

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

¿Por qué uso text() ? Porque html() solo devolverá el HTML interno del primer elemento de resultado.

Answer 4

Si tus elementos están en el mismo nivel, algo como esto:

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

Es decir, su próximo elemento de encabezado no es hijo de un elemento en el mismo nivel que el primer elemento de encabezado. Puedes probar este código:

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

Answer 5

Si, tienes razón. Esto solo evitará el selector deseado. Tal vez necesita ser más detallado:

$(firstSelector).nextAll().not(secondSelector).not($(secondSelector).nextAll()).text()

Answer 6

Siento como si la respuesta aceptada necesitara un poco de actualización desde el lanzamiento de jQuery 1.8 y posterior. .andSelf() ha quedado en desuso. En su lugar, tenemos .addBack() . La documentation explica todo lo que necesita saber.

Answer 7

$(''#secondSelector'').prevAll(''#firstSelector ~ *'')