选择另一个元素中的每四个元素

Question

<ul>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#>
        <img src=" #">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
</ul>

是否可以选择这些列表项中的每四个图像标记？我知道我可以选择每个第四个li元素，因为我希望浮动它们但是有一种解决方法，所以我可以选择列表项中的每个第四个图像元素吗？

Answer 1

使用nth-child选择器ul li:nth-child(4n) a img尝试使用此代码选择每个第4个img代码

ul li:nth-child(4n) a img{
//custom css here
}

ul li:nth-child(4n) a img{background:red;height:100px;width:100px;}

<ul>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
     <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
     <li>
      <a href="#">
        <img src="#">
      </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
     </a>
    </li>
    <li>
      <a href="#">
        <img src="#">
     </a>
   </li>
   <li>
     <a href="#">
       <img src="#">
     </a>
   </li>
  </ul>

Answer 2

您可以使用:nth-child()选择器，如下所示。

$('ul li:nth-child(4n) img').css('border', '2px solid red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
        <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
    <li>
        <a href="#">
            <img src="#">
        </a>
    </li>
</ul>

Answer 3

此规则允许您选择每4 <li>中的图像：

li:nth-of-type(4n) a img{
    /* CSS Here */
}

Answer 4

您可以使用:eq选择器。它的起始索引0与数组相同。

$("ul li").eq(3).find('img').css("color", "red");

OR

$("ul li:eq(3)")find('img').css("color", "red");