在另一個元素內選擇每第四個元素

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

是否可以選擇這些列表項中的每個第四個圖像標記？我知道我可以只選擇每個第四個元素，因爲即時通訊尋找浮動它們，但有沒有辦法繞過它，所以我可以選擇列表項中的每個第四個圖像元素？在另一個元素內選擇每第四個元素

來源

2016-03-03 krimz

不明白的Qstn！ –

我認爲這將幫助你的方式： http://stackoverflow.com/questions/3462298/select-every-nth-element-in-css?rq=1 –

此規則將讓你在每4個<li>選擇圖像：

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

來源

2016-03-03 08:52:47

所有其他的jQuery方法的工作，但我會而是使用CSS來做到這一點。謝謝！ – krimz

通過第n個孩子選擇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>

來源

2016-03-03 08:52:27

您可以使用: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>

來源

2016-03-03 08:52:30 Azim

可以使用:eq選擇。它的起始索引0與數組相同。

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

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

來源

2016-03-03 09:01:59

在另一個元素內選擇每第四個元素

回答

相關問題