बटन क्लिक पर वर्तमान सक्रिय सूची तत्व से अगले सूची तत्व का डेटा-आईडी कैसे प्राप्त करें?

 <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> 

अगला तत्व डेटा-आईडी अंतिम (तीसरे) ली तक दिखाया जाना चाहिए।

0
Ne2 6 जिंदा 2021, 08:07

3 जवाब

सबसे बढ़िया उत्तर

आप अगले li को .next('li') के साथ ढूंढ सकते हैं और .attr('data-id') के साथ इसकी विशेषता data-id मान प्राप्त कर सकते हैं। $('li.active').removeClass('active'); के साथ वर्तमान में सक्रिय li से active वर्ग को हटा दें और next.addClass('active'); के साथ अगले li में सक्रिय वर्ग जोड़ें।

नीचे की तरह कोशिश करें।

$('#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>
2
Karan 6 जिंदा 2021, 09:06

आप अगला li तत्व प्राप्त करने के लिए next() का उपयोग कर सकते हैं और .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>
2
Bhushan Kawadkar 6 जिंदा 2021, 08:19

वेनिला जावास्क्रिप्ट का उपयोग करके, आप li तत्व पर .nextElementSibling() का उपयोग कर सकते हैं जिसमें 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>
1
dale landry 7 जिंदा 2021, 03:43