如何兄弟姐妹只是下一个div

Question

我试图用indented类名调整下一个div。在前面，我有所有下一个div，其中indented具有相同的id。

实际上，每个以indented为类名的div都应该有<li>的id，就在它之前。这是我的js:

if ($('.o-commentaires-items').length) {
var cls = $('.o-commentaires-items').find($(".comment-parent")).attr('id').split(' ')[0];
number = cls.substr(cls.lastIndexOf("-") + 1);

console.log("closest : ", 'collapsee-' + number);
$('.o-commentaires-items').find($(".comment-parent").next(".indented").addClass("collapse").attr({
"id":  "collapse-"+number,
"aria-labelledby":  "heading-"+number
}));
}

检查员在chrome:中显示的html

<ul class="o-commentaires-items accordion">
<li data-comment-user-id="1" id="comment-137" class="js-ajax-comments-id-137 contextual-region js-comment o-commentaires-item comment-parent by-viewer" data-comment-parent="0">
test
</li>
<div class="indented collapse" id="collapse-137" aria-labelledby="heading-137" style="">
<li data-comment-user-id="1" id="comment-139" class="js-ajax-comments-id-139 contextual-region js-comment o-commentaires-item comment-child comment-parent-137 by-viewer" data-comment-parent="137">
child 1 
</li>

<li data-comment-user-id="1" id="comment-140" class="js-ajax-comments-id-140 contextual-region js-comment o-commentaires-item comment-child comment-parent-137 by-viewer" data-comment-parent="137">
child 2
</li>
</div>

<li data-comment-user-id="1" id="comment-136" class="js-ajax-comments-id-136 contextual-region js-comment o-commentaires-item comment-parent by-viewer" data-comment-parent="0">
test 2
</li>
<div class="indented collapse" id="collapse-137" aria-labelledby="heading-137" style="">
<li data-comment-user-id="1" id="comment-138" class="js-ajax-comments-id-138 contextual-region js-comment o-commentaires-item comment-child comment-parent-136 by-viewer" data-comment-parent="136">
child 1
</li>
</div>
</ul>

Answer 1

您可以使用.each循环遍历所有indenteddiv，然后使用:first获取该div中的第一个li。然后，只需将属性添加到元素中，即：.attr()。

演示代码 :

if ($('.o-commentaires-items').length) {
//loop 
$(".indented").each(function() {
console.log($(this).find("li:first").attr("id"))
//get first li attr id
var id = $(this).find("li:first").attr("id").split('-')[1]
//add attrs..
$(this).addClass("collapse").attr({
"id": "collapse-" + id,
"aria-labelledby": "heading-" + id
});
})
}

.collapse {
border: 1px solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="o-commentaires-items accordion">
<li data-comment-user-id="1" id="comment-137" class="js-ajax-comments-id-137 contextual-region js-comment o-commentaires-item comment-parent by-viewer" data-comment-parent="0">
test
</li>
<div class="indented collapse" id="collapse-137" aria-labelledby="heading-137" style="">
<li data-comment-user-id="1" id="comment-139" class="js-ajax-comments-id-139 contextual-region js-comment o-commentaires-item comment-child comment-parent-137 by-viewer" data-comment-parent="137">
child 1
</li>
<li data-comment-user-id="1" id="comment-140" class="js-ajax-comments-id-140 contextual-region js-comment o-commentaires-item comment-child comment-parent-137 by-viewer" data-comment-parent="137">
child 2
</li>
</div>

<li data-comment-user-id="1" id="comment-136" class="js-ajax-comments-id-136 contextual-region js-comment o-commentaires-item comment-parent by-viewer" data-comment-parent="0">
test 2
</li>
<div class="indented collapse" id="collapse-137" aria-labelledby="heading-137" style="">
<li data-comment-user-id="1" id="comment-138" class="js-ajax-comments-id-138 contextual-region js-comment o-commentaires-item comment-child comment-parent-136 by-viewer" data-comment-parent="136">
child 1
</li>
</div>
</ul>

Answer 2

感谢@Swati提供给我的代码，我能够找到一个解决方案：

if ($('.o-commentaires-items').length) {
//loop
$(".indented").each(function() {
console.log($(this).prev(".comment-parent").attr("id"))
//get first li attr id
var id = $(this).prev(".comment-parent").attr("id").split('-')[1];
//add attrs..
$(this).addClass("collapse").attr({
"id": "collapse-" + id,
"aria-labelledby": "heading-" + id
});
})
}