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

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

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

更新：

您的建议很好，但不是我想要的。例如，在下面的代码中，我只想访问id为“ heading2”的“ h1”以及所有内容，但不包括id为“ heading3”的“ h1”。

上面提供的jQuery示例将访问不是“ h”标记的第一个“ 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>

解决这个问题特别有两种方法：.nextUntil和和.andSelf。第一个将抓住选择器之后的所有兄弟姐妹，而后者也会将与选择器匹配的所有东西都混在一起，从而为您提供一个包含所有它们的jQuery对象：

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

结果如下：

在此处输入图片说明

这是我用于项目的解决方案：

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

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

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

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

也许，与

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

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

我觉得自jQuery 1.8及更高版本以来，似乎可接受的答案需要进行一些更新。.andSelf()已不推荐使用。取而代之的是.addBack()。该文档说明了您需要了解的所有内容。

如果您的元素处于同一级别，则如下所示：

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

本文地址：http://jquery.askforanswer.com/ruhezaijqueryzhongxuanzelianggebiaoqianzhijiandesuoyouneirong.html
文章标签：css-selectors , jquery , traversal
版权声明：本文为原创文章，版权归 admin 所有，欢迎分享本文，转载请保留出处！

更新：

文件下载