[英]To find Next element data-id of list in JQuery
How to get the data-id of next list element from the current active list element on button click?如何在按钮单击时从当前活动列表元素中获取下一个列表元素的数据 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>
The next element data-id need to be shown till the last (third) li.下一个元素 data-id 需要显示到最后一个(第三个)li。
you can make use of next()
to get next li element and read data-id using .data('id)
... see below code sample您可以使用
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>
You can find next li
with .next('li')
and find its attribute data-id
value with .attr('data-id')
.您可以使用
.next('li')
找到下一个li
,并使用.attr('data-id')
找到其属性data-id
值。 Remove active
class from currently active li with $('li.active').removeClass('active');
使用
$('li.active').removeClass('active');
从当前活动的 li 中删除active
的 class; & add active class in next li with next.addClass('active');
& 在下一个 li 中添加活动 class 与
next.addClass('active');
. .
Try like below.尝试如下。
$('#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>
Using vanilla Javascript, you can use the .nextElementSibling()
on the li element that has a class of active
.使用 vanilla Javascript,您可以在 li 元素上使用
.nextElementSibling()
,该元素的 class 为active
。 Wrap this in a loop that iterates to check the elements length with an iterator.将其包装在一个循环中,该循环使用迭代器进行迭代以检查元素长度。 Place a conditional that stops the iteration once we get to the length of the nodeList within an eventlistener on click of the button.
放置一个条件,一旦我们在单击按钮时到达事件监听器中的节点列表的长度,就停止迭代。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.