我想从我在下面的代码中放置的框中;选择z轴索引等于3的框，并将其背景设置为红色，标题设置为白色，以与其他框区分开来。
网页：

<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>

为此，我写了一个不能正常工作的脚本代码，即框的背景变红，但标题的颜色不变：
脚本：

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