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

Question

我嘗試使用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>
 

Answer 1

您可以使用.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>

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
        });
    })
}