[FIXED] How to add CSS .nex() property in jQuery

Issue

When adding the class "playing" then I will add the next li tag custom CSS. Please read my code, my you understand

See my code.

   <ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul> 

JQuery :

$(".playing").next("#head .block").css({"color": "red", "border": "2px solid red"});

Jquery not working next() property :(

Solution

.next returns the related sibling on same level. .block is the child of #head and is not on same level.

Use find after next in this way:

    $(".playing").next("#head")
                 .find(".block")
                 .css({"color": "red", "border": "2px solid red"});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <ul>
    <li class="playing">li (sibling)</li>
    <li id="head">li <b class="block">(sibling)</b></li>
    <li>li (sibling with class name "start")</li>
    <li>li (the next sibling of li with class name "start")</li>
    <li>li (sibling)</li>
  </ul>

Answered By - kiddorails

Answer Checked By - Willingham (PHPFixing Volunteer)