获取2个元素之间的元素
Get elements between 2 elements
我有这个html:
<div class="categories">
<div class="list-group">
<a class="root list-group-item" id="427" style="display: block;"><span class="glyphicon indent0 glyphicon-chevron-down"></span><span>Home</span></a>
<a class="list-group-item first active" id="428" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Images</span></a>
<a class="list-group-item child" id="431" style="display: none;"><span class="glyphicon indent2"></span><span>Sub category</span></a>
<a class="list-group-item first" id="429" style="display: block;"><span class="glyphicon indent1 glyphicon-chevron-right"></span><span>Videos</span></a>
<a class="list-group-item child" id="432" style="display: none;"><span class="glyphicon indent2"></span><span>Another sub</span></a>
<a class="list-group-item first" id="430" style="display: block;"><span class="glyphicon indent1"></span><span>Documents</span></a>
</div>
</div>
我需要做的是选择a.active之间的所有元素。为了更好地解释这一点a.active有一个span.ghryphicon和类indent1,所以我需要在indent1和下一个indent1之间选择元素
我试图使用jQuery的nextAll函数,但无法正常工作:(
任何帮助都将不胜感激,
/r3plica
更新1
感谢Arun,这是我的脚本,现在可以工作了:
$(".glyphicon", treeRoot).on('click', function (e) {
e.stopPropagation();
var $glyph = $(this);
var $item = $glyph.parent();
var indent = $item.find(".glyphicon").prop('className').match(/'b(indent'd+)'b/)[1];
console.log($item[0].outerHTML);
console.log(indent);
if (indent != undefined) {
var $children = $item.nextUntil("a:has(." + indent + ")");
console.log($children[0].outerHTML);
if ($glyph.hasClass("glyphicon-chevron-right")) {
$glyph
.addClass('glyphicon-chevron-down')
.removeClass("glyphicon-chevron-right");
if ($children != null) $children.show();
} else {
$glyph
.addClass('glyphicon-chevron-right')
.removeClass("glyphicon-chevron-down");
if ($children != null) $children.hide();
}
}
});
尝试
$('.active').nextUntil('a:has(.indent1)')
动态确定缩进值
var $active = $('.active');
var indent = $active.find('.glyphicon').prop('className').match(/'b(indent'd+)'b/)[1];
var $nexts = $active.nextUntil('a:has(.' + indent + ')');
console.log($nexts)
演示:Fiddle
尝试使用nextUntil()
实时演示
$('.active:has(.indent1)').nextUntil(':has(.indent1)')
可能使用next直到(来自Jquery)
看看http://api.jquery.com/nextUntil/
$('.active').nextUntil('.indent1');
相关文章:
- 操作放置在画布上的元素之间的连接
- DOM元素和angular元素之间的主要区别是什么
- 在 JavaScript 数组中的所有元素之间穿插元素的简洁方法
- JS get元素之间的差异's属性与elem.getAttribute(attr)和elem[attr]
- Javascript集:任何覆盖元素之间比较的方法
- jqmobile列表视图中元素之间的间距相等
- 如何在两个动画画布元素之间进行通信
- 第一个元素和最后一个元素之间的连续循环
- 在元素之间导航的Javascript
- 在照片库中的两个元素之间切换样式会发生变化
- 计数元素之间的语法混淆
- jquery多次在元素之间插入html
- javascript,两个数组的相同元素之间的比较
- 3个元素之间的自动切换
- 如何使用jQuery在两个元素之间切换类
- 自定义元素之间的聚合物双向结合[包括示例]
- 使用setTimeout在创建新元素之间强制延迟
- 在javascript数组元素之间添加换行符
- 获取2个元素之间的元素
- 如何不断检查页面元素之间的冲突