如何在jQuery中选择两个标签之间的所有内容

Question

我有一个带有标题和无序列表的文档。

如何使用 JQuery 选择给定标题（通过其唯一的类名）以及该标题和下一个标题之间的所有内容？

更新：

你们提供的建议很好，但并不是我想要的。例如，在下面的代码中，我只想访问'id'为'heading2'的"h1"和除'id'为'heading3'的"h1"之外的所有内容。

上面提供的jQuery示例将访问第一个非"h"标签后面的所有内容，这不是我想要的。

...或者，如果我错了，请纠正我 :)

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

- edt

Answer 1

解决这个问题非常有用的两种方法是: .nextUntil 和 .andSelf。第一个将获取您选择器后面的所有同级元素，而后者将匹配您选择器的任何内容并入其中，使您拥有一个包含它们所有的jQuery对象：

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

这会导致以下结果：

- Jonathan Sampson

---

谢谢 JQuery 的教程！非常有效。 - edt

谢谢。这有助于解决Firefox 3.6.4和nextUntil()的噩梦问题。 - Robin Fisher

有任何想法如何在Cheerio中实现这个？ - chovy

看起来.andSelf已经被弃用了，我们需要从jQuery 1.8开始使用.addBack()。http://api.jquery.com/addBack/ - Abdul Hameed

Answer 2

以下是我在项目中使用的解决方案：

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

使用方法

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

- Lasse Espeholt

Answer 3

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

- jesper

---

聪明。正是我所需要的。 - Richard Harrison

Answer 4

我觉得随着jQuery 1.8及以后版本的发布，被接受的答案需要更新一下。 .andSelf()已经不推荐使用了，取而代之的是.addBack()。 文档中解释了你需要知道的所有内容。

- Thomas

Answer 5

是的，你说得对。这只会避免所需的选择器。也许需要更详细的说明：

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

- Ricardo Vega

Answer 6

也许，用

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

为什么我要使用text()呢？因为html()只会返回第一个结果元素的内部HTML。

- Ricardo Vega

Answer 7

如果您的元素处于同一级别，可以使用以下方式：

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

也就是说，你的下一个标题元素不是与第一个标题元素在同一级别的元素的子元素。你可以尝试使用以下代码：

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

- Discodancer

---

嗨，好答案，我们有相同的想法，但你忘了提供内容 :) - Ricardo Vega