包装在不同UL中的下一个子项LI

Question

I have the following list:

<ul>
    <li class="item">One</li>
    <li class="item">Two</li>
    <li class="item">Three
        <ul>
            <li class="item">Something Original</li>
            <li class="item selected">Something</li>
        </ul>
    </li>
    <li>Four 
        <ul>
            <li class="item">I want this selected next</li>
            <li class="item">Good</li>
        </ul>
    </li>
</ul>

Using jQuery, how do I find the next li with the class="item" since it is wrapped in a different container. Obviously I cannot do $(".selected").next(".item") so how else can I do it?

JSFiddle: http://jsfiddle.net/q3f6v7zz/

Answer 1

Since the li elements are nested and you know that you want the next appearing li with a particular class, you can use .index() and do something like this

var $li = $('.item'); // <--- get the list of all lis with class .item
var index = $li.index($('.selected')); // <--- find the index of the one with .selected amongst all the lis
console.log($li.eq(index+1).html()); // <--- index+1 because you need the next appearing li after selected

---

If you want to move the selected class on keydown something like this should do

var $li = $('.item');
$(document).on('keydown', function(e) {
  if (e.keyCode == 40) {
    var index = $li.index($('.selected'));
    $li.eq(index).removeClass('selected');
    index = (index+1) % $li.length; // <--- to rotate the values from 0 to count of li.item elements
    $li.eq(index).addClass('selected');
  }
});

 var $li = $('.item'); $(document).on('keydown', function(e) { if (e.keyCode == 40) { var index = $li.index($('.selected')); $li.eq(index).removeClass('selected'); index = (index+1) % $li.length; $li.eq(index).addClass('selected'); } }); 

 .selected { background: green; color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <ul> <li class="item">One</li> <li class="item">Two</li> <li>Three <ul> <li class="item">Something</li> <li class="item selected">Something Else</li> </ul> </li> <li>Four <ul> <li class="item">I want this selected next</li> <li class="item">Good</li> </ul> </li> </ul> 

Answer 2

Not sure what you are exactly looking for but you can use $(Element").parent().parent().find("li");

So in other words .parent() may be what you are looking for there is also .sibling() to find or you may want $('li').closest('ul').find('li') which will go up the tree to find the nearest ul to the one you are looking for https://api.jquery.com/closest/

You may also use:

Vanilla JS to do something similar to what was discussed by others with $index if it makes more sense to you: Again this isn't as efficient but that is basically what JQuery is doing:

var myLis = document.getElementsByTagName('li');
var wantedIndex;
for(var i = 0;i<myLis.length; i++){
   if(myLis[i].className === "active"){
      wantedIndex = i+1; //gets the li which is next when selecting all lis
       }
}

Answer 3

You can get the index of the selected element within all li s, and then increment that index to get the next one.

 $("ul").on("click", "li.item.selected", function() { var all_li = $("li.item"); var selected_index = all_li.index(this); var next_li = all_li.eq((selected_index + 1) % all_li.length); $(this).removeClass("selected"); next_li.addClass("selected"); }); 

 .item.selected { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class="item">One</li> <li class="item">Two</li> <li class="item">Three <ul> <li class="item selected">Something</li> </ul> </li> <li>Four <ul> <li class="item">I want this selected next</li> <li class="item">Good</li> </ul> </li> </ul> 

I used the modulus so it will wrap around at the end.