使用CSS或js使用动态选择器选择任何li的下一个元素

Question

I can't find out the way to get this.

<ul>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
</ul>

And apply dynamic class to li onclick using js. then select the next li to apply some extra css.

<ul>
    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
    <li class="test"></li>

    *******<li class=""></li>

    <li class=""></li>
    <li class=""></li>
    <li class=""></li>
</ul>

Now i want to apply css on *******li.

Hope my question is clear. Thanks in advance.

Answer 1

you can use css selectors in javascript, so you can do something like this:

var yourListItem = document.querySelector("li.test + li");

here's a fiddle for you

Answer 2

$("li").on("click", function(){
  $(this).addClass("yourclass");
  $(this).next("li").css("backgroung-color","red"); //add css
});

Answer 3

.next can only return the immediate next sibling

$('li.test').on('click', function() {
    $('li.test').next('li').css("color", "red");
});

and to change the color of ******* you need to put them in li tag, as follows:

<li class="">*******</li>

Also you can use $(this) instead of $('li.test') as said by @empiric

Answer 4

I think no need for jquery use the css tag that will do the same thing

it will Select <li> elements that are placed immediately after .test class

ex: http://jsfiddle.net/Muthukumaru/q64tLhf5/

 li.test + li{
   **Your css styles **
 }

Answer 5

use below cod . read more about next()

check DEMO

 $(document).ready(function(){
  $('li.test').next('li').css('color','red');
 });

For click event

 $(document).ready(function(){
   $('li.test').on('click',function(){
    $(this).next('li').css('color','red');
   });
 });

Answer 6

you should try like this

  $(document).ready(function(){ $('li.test').next('li').css('color','green') }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li class=""></li> <li class=""></li> <li class=""></li> <li class="test"></li> <li class=""></li> <li class=""></li> <li class=""></li> <li class=""></li> </ul>