Vorherige und nächste Listenelement-ID abrufen, wenn vorhanden?

Question

Ich steckte auf einen Punkt und brauche deine Hilfe Freunde. Ich brauche vorherige und nächste Liste. Zum Beispiel habe ich drei li in einer ul und diese zweite ist aktiv. Jetzt muss ich vorher und nächstes li id ​​bekommen. und wenn der erste li aktiv ist, tue nichts, auch wenn letzter li dann nichts tut.

<ul> 
    <li id="1">First <span class="testId">14</span></li> 
    <li id="2" class="active">Second <span class="testId">15</span></li> 
    <li id="3">Third <span class="testId">16</span></li> 
</ul> 

JQuery Code ich versuche aber nicht verstehen, wie diese

if(){ 
      alert('good'); 
      /*var PrevTestId = $(this).prev('li').find('.testId').text(); 
      var thisId = $(this).next().find('.testId').text(); 
      alert(PrevTestId +" , "+ thisId);*/ 
     } 
     if($(this).index() > 0){ 
      var PrevTestId = $(this).prev('li').find('.testId').text(); 
      var thisId = $(this).next().find('.testId').text(); 
      alert(PrevTestId +" , "+ thisId); 
     } 

Answer 1

Hier gehen Sie mit der Lösung https://jsfiddle.net/1aL33df4/

$('li').hover(function(){ 
 
    \t if(typeof $(this).prev().attr('id') != 'undefined') 
 
    \t \t console.log("Previous Element ID: " + $(this).prev().attr('id')); 
 
    if(typeof $(this).next().attr('id') != 'undefined') 
 
    \t console.log("Next Element ID: " + $(this).next().attr('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="1">First <span class="testId">14</span></li> 
 
    <li id="2" class="active">Second <span class="testId">15</span></li> 
 
    <li id="3">Third <span class="testId">16</span></li> 
 
</ul>

Answer 2

1. Verwenden .next tun() oder .prev() jeweils li
2. Verwendung .attr zu erhalten() erhalten Sie die ID
3. Verwendung hasClass() zu testen, ob li aktive Klasse hat

var pliid = $("ul li.active").prev('li').attr('id'); 
 
var nliid = $("ul li.active").next('li').attr('id'); 
 

 
console.log("prev li id is " + pliid) 
 
console.log("prev li is active " + $("ul li.active").prev('li').hasClass('active')) 
 
console.log("prev li textid text " + $("ul li.active").prev('li').find('.testId').text()) 
 
console.log("next li id is " + nliid) 
 
console.log("next li is active " + $("ul li.active").next('li').hasClass('active')) 
 
console.log("next li textid text " + $("ul li.active").next('li').find('.testId').text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="1">First <span class="testId">14</span></li> 
 
    <li id="2" class="active">Second <span class="testId">15</span></li> 
 
    <li id="3">Third <span class="testId">16</span></li> 
 
</ul>