edt*_*edt 57 jquery traversal css-selectors
我有一个标题和无序列表的文档.
如何使用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>
Run Code Online (Sandbox Code Playgroud)
Sam*_*son 71
特别是两种方法解决这个问题非常有用:.nextUntil
和.andSelf
.第一个会抓住你的选择器之后的所有兄弟姐妹,而后者将把你的选择器匹配的任何东西都混在一起,给你一个jQuery对象,包括所有:
$("#heading2")
.nextUntil("#heading3").andSelf()
.css("background", "red");
Run Code Online (Sandbox Code Playgroud)
这导致以下结果:
这是我用于项目的解决方案:
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);
Run Code Online (Sandbox Code Playgroud)
用法
$('body').between($('#someid'), $('#someid2')).each(function () {
// Do what you want.
});
Run Code Online (Sandbox Code Playgroud)