Selecting an element with JavaScript (z-index)

January 17, 2023

I want from among the boxes that I put in the code below; Select a box whose z-index is equal to 3 and make its background red to distinguish it from other boxes.

html:

 <ul>
        <li class="post1">
            <div class="content">
                <h4 class="title">title post1</h4>
            </div>
        </li>

        <li class="post2">
            <div class="content">
                <h4 class="title">title post2</h4>
            </div>
        </li>

        <li class="post3">
            <div class="content">
                <h4 class="title">title post3</h4>
            </div>
        </li>

        <li class="post4">
            <div class="content">
                <h4 class="title">title post4</h4>
            </div>
        </li>

        <li class="post5">
            <div class="content">
                <h4 class="title">title post5</h4>
            </div>
        </li>
    </ul>

For this purpose I wrote a script code that does not work. Please edit this code for me:

script:

$("li").each(function(){
var a=$(this).find("li");
$(this).css('z-index',3);
a.style.background= "red";
});

>Solution :

This should work

$("li").each(function(index){//goes througth li elements
if($(this).css("z-index") == 3){//if zindex equals 3
  $(this).css("background-color","red");//set back ground to red
}
});