[英]How to wrap previous and next sibling text of <br> with div using jquery?
[英]How to sibling just the next div
我尝试使用indented
的 class 名称来解释下一个 div。 在前面,我有所有下一个indented
的 div 具有相同的 id。
实际上,每个indented
为 class 名称的 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>
您可以使用.each
循环遍历所有indented
的 div,然后使用:first
get first li inside 该 div。 然后,只需将属性添加到您的元素,即: .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>
感谢@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
});
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.