在 JQuery 中查找列表的下一個元素數據 ID

Question

如何在按鈕單擊時從當前活動列表元素中獲取下一個列表元素的數據 ID？

 <div class="nbrs">
    <ul>
      <li id="item1" data-id="1" class="active">Coffee (first li)</li>
      <li id="item2" data-id="2">Tea (second li)</li>
      <li id="item3" data-id="3">Green Tea (third li)</li>
    </ul>
    </div>

   <button id="btnNext" type="button">Next</button> 

下一個元素 data-id 需要顯示到最后一個（第三個）li。

Answer 1

您可以使用next()獲取下一個 li 元素並使用.data('id)讀取 data-id ...見下面的代碼示例

 $(function(){ $('#btnNext').on('click', function(){ var $next = $('ul li.active').next('li'); if($next.length > 0) { var id = $next.data('id'); alert(id); } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nbrs"> <ul> <li id="item1" data-id="1" class="active">Coffee (first li)</li> <li id="item2" data-id="2">Tea (second li)</li> <li id="item3" data-id="3" >Tea (third li)</li> </ul> </div> <button id="btnNext" type="button">Next</button>

Answer 2

您可以使用.next('li')找到下一個li ，並使用.attr('data-id')找到其屬性data-id值。 使用$('li.active').removeClass('active');從當前活動的 li 中刪除active的 class； & 在下一個 li 中添加活動 class 與next.addClass('active'); .

嘗試如下。

 $('#btnNext').click(function() { // find next li from currently active li let next = $('li.active').next('li'); if (next.length > 0) { // remove active class from currently active li $('li.active').removeClass('active'); // add active class in next li next.addClass('active'); // get data id from next li let dataId = next.attr('data-id'); alert(dataId); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <div class="nbrs"> <ul> <li id="item1" data-id="1" class="active">Coffee (first li)</li> <li id="item2" data-id="2">Tea (second li)</li> <li id="item3" data-id="3">Green Tea (third li)</li> </ul> </div> <button id="btnNext" type="button">Next</button>

Answer 3

使用 vanilla Javascript，您可以在 li 元素上使用.nextElementSibling() ，該元素的 class 為active 。 將其包裝在一個循環中，該循環使用迭代器進行迭代以檢查元素長度。 放置一個條件，一旦我們在單擊按鈕時到達事件監聽器中的節點列表的長度，就停止迭代。

 const active = document.querySelectorAll('li'); const btn = document.getElementById('btnNext'); //--> initialize a counter let i = 0; //--> loop over the list item elements active.forEach((val) => { //--> use the current element being looped over //--> and check to see if it contains class of active if (val.classList.contains('active')) { //--> event listener for the click of the button btnNext.addEventListener('click', () => { //--> here we add a constraint for the loop using.length against the counter //--> if our counter is less than the list items length minus 1 //--> this means we have not reached the end of the list items if (i < active.length - 1) { //--> we use the counter i as a key on the list items element list //--> to get the dataset.id of the nextElementSibling console.log(active[i].nextElementSibling.dataset.id); //--> increase counter by one for the next loop through logic i++; } }) } })

 <div class="nbrs"> <ul> <li id="item1" data-id="1" class="active anotherclass">Coffee (first li)</li> <li id="item2" data-id="2">Tea (second li)</li> <li id="item3" data-id="3">Green Tea (third li)</li> </ul> </div> <button id="btnNext" type="button">Next</button>