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

Tengo un documento con encabezados y listas desordenadas.

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

Actualización:

Sus 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 id de" heading2 "y todo hasta, pero sin incluir el" h1 "con id de"heading3".

Los ejemplos de jQuery proporcionado anteriormente tendrá acceso a todo después de la primera etiqueta" h "que no es una etiqueta" h".

... o, corrígeme si me equivoco:) 

    <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>
Author: Peter Mortensen, 2009-01-26
Source

7 answers

Dos métodos en particular serían muy útiles para resolver este problema: .nextUntil, y .andSelf. El primero agarrará todos los hermanos que siguen a su selector, y el segundo agrupará lo que coincida con su selector también, dándole un objeto jQuery que los incluye a todos: 

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

Esto resulta en lo siguiente:

introduzca la descripción de la imagen aquí

 71
Author: Sampson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-28 13:42:07

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

JQuery selector 

(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.
});
 7
Author: Lasse Espeholt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-21 18:17:37 
$('#secondSelector').prevAll('#firstSelector ~ *')
 3
Author: jesper,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-04-30 09:16:41

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

$(firstSelector).nextAll().not(secondSelector).not($(secondSelector).nextAll()).text()
 2
Author: Ricardo Vega,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-21 18:17:03

Tal vez, con

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

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

 1
Author: Ricardo Vega,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-21 18:15:22

Siento que la respuesta aceptada necesita un poco de actualización desde el lanzamiento de jQuery 1.8 y posteriores. .andSelf() ha sido obsoleto. En su lugar, tenemos .addBack(). La documentación explica todo lo que necesita saber.

 1
Author: Thomas,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-27 14:14:31

Si sus 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, el siguiente elemento heading no es hijo de un elemento al mismo nivel que el primer elemento heading. 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");
 0
Author: disc0dancer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-21 18:16:39