Selecting a child tag with JavaScript-CodePudding

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

html:

<ul>
        <li >
            <div >
                <h4 >title post1</h4>
            </div>
        </li>

        <li >
            <div >
                <h4 >title post2</h4>
            </div>
        </li>

        <li >
            <div >
                <h4 >title post3</h4>
            </div>
        </li>

        <li >
            <div >
                <h4 >title post4</h4>
            </div>
        </li>

        <li >
            <div >
                <h4 >title post5</h4>
            </div>
        </li>
    </ul>

For this purpose, I wrote a script code that does not work properly. That is, the background of the box becomes red, but the color of the title does not change:

script:

$("li").each(function (index) {
    if ($(this).css("z-index") == 3) {
      $(this).css("background-color","red");
       $(this).children(".title").css("color","white");
    }
  });

CodePudding user response：

The issue may be with children, try using find.

$(this).find(".title").css("color","white");