jQuery 如何在jQuery中选择两个标签之间的所有内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/481076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select all content between two tags in jQuery
提问by edt
I have a document with headings and unordered lists.
我有一个带有标题和无序列表的文档。
How can I use JQuery to select a given heading (by its unique class name) AND all content between that heading and the next heading?
如何使用 JQuery 选择给定的标题（通过其唯一的类名）以及该标题和下一个标题之间的所有内容？
Update:
更新：
Your suggestions are great, but aren't what I'm looking for. In the below code, for example, I would like to access only the "h1" with id of "heading2" and everything up to, but not including the "h1" with id of "heading3".
你的建议很好，但不是我要找的。例如，在下面的代码中，我只想访问 ID 为“heading2”的“h1”以及所有内容，但不包括 ID 为“heading3”的“h1”。
The jQuery examples provided above will access everyting after the first "h" tag that is not an "h" tag.
上面提供的 jQuery 示例将访问第一个不是“h”标签的“h”标签之后的所有内容。
... or, correct me if I'm wrong :)
...或者，如果我错了，请纠正我:)
<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>
回答by Sampson
Two methods in particular would be very useful solving this problem: .nextUntil, and .andSelf. The first will grab all of the siblings following your selector, and the latter will lump in whatever is matched by your selector as well, giving you one jQuery object that includes them all:
特别是有两种方法对解决这个问题非常有用：.nextUntil, 和.andSelf。第一个将获取选择器后面的所有兄弟姐妹，后者也会将与您的选择器匹配的任何内容混在一起，为您提供一个包含它们的 jQuery 对象：
$("#heading2")
.nextUntil("#heading3").andSelf()
.css("background", "red");
This results in the following:
这导致以下结果：
回答by Lasse Espeholt
Here is the solution I use for my projects:
这是我用于我的项目的解决方案：
jQuery 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);
Usage
用法
$('body').between($('#someid'), $('#someid2')).each(function () {
// Do what you want.
});
回答by jesper
$('#secondSelector').prevAll('#firstSelector ~ *')
回答by Ricardo Vega
Yeah, you're right. This will only avoid the desired selector. Maybe it needs to be more detailed:
是啊，你说得对。这只会避免所需的选择器。也许它需要更详细：
$(firstSelector).nextAll().not(secondSelector).not($(secondSelector).nextAll()).text()
回答by Ricardo Vega
回答by Thomas
I feel as if the accepted answer needs a bit of an update since the release of jQuery 1.8 and later. .andSelf()has been deprecated. In its place, we have .addBack(). The documentationexplains everything you need to know.
我觉得自 jQuery 1.8 及更高版本发布以来，接受的答案似乎需要一些更新。.andSelf()已被弃用。取而代之的是，我们有.addBack(). 该文档解释了您需要知道的一切。
回答by disc0dancer
If your elements are at the same level, something like this:
如果您的元素处于同一级别，则如下所示：
<h1 id="heading1">...</h1>
<ul>...</ul>
<p>...</p>
<ul>...</ul>
<p>...</p>
<h1 id="heading2" >...</h1>
That is, your next heading element is not a child of an element at the same level as the first heading element. You can try this code:
也就是说，您的下一个标题元素不是与第一个标题元素处于同一级别的元素的子元素。你可以试试这个代码：
// This will get all the following siblings of <h1 id="heading1"> except those that are headings themselves
var elements = $('#heading1').nextAll().not("h1");
