Question

我有这个HTML结构：

<div class="fullNews"> 
  <div class="mainText">
     <a href="news-16.jpg"><img src="/contentthumbs/news-16_thumb.jpg"></a> 
     <a href="news-17.jpg"><img src="/contentthumbs/news-17_thumb.jpg"></a> 
     <a href="news-18.jpg"><img src="/contentthumbs/news-18_thumb.jpg"></a> 
     <a href="news-19.jpg"><img src="/contentthumbs/news-19_thumb.jpg"></a> 
  </div>
</div>
<div class="fullNews"> 
  <div class="mainText">
     <a href="news-20.jpg"><img src="/contentthumbs/news-20_thumb.jpg"></a> 
     <a href="news-21.jpg"><img src="/contentthumbs/news-21_thumb.jpg"></a> 
     <a href="news-22.jpg"><img src="/contentthumbs/news-22_thumb.jpg"></a> 
     <a href="news-23.jpg"><img src="/contentthumbs/news-23_thumb.jpg"></a> 
  </div>
</div>

我试图通过JQuery将CSS类仅应用于每批父div的第一个超链接：

$('.mainText a:first').addClass('mainPhoto');

但它只将类添加到第一个div组的第一个超链接。我需要每个<div class="mainText">的所有第一个超链接获得该类，在此示例中：

 <a href="news-16.jpg">
 <a href="news-20.jpg">

提前致谢

Answer 1

为什么选择jQuery？使用纯CSS：

.mainText a:first-child {
    <your properties>
}

关于你的jQuery错误：

您使用的:first不是CSS选择器，而是jQuery选择器，它只匹配第一个匹配元素。
您应该使用:first-child作为CSS选择器，并选择匹配的每个第一个孩子。

Answer 2

使用first-child Selector，它会选择所有父元素的子元素。虽然:first只匹配一个元素

 $('.mainText a:first-child').addClass('mainPhoto');

DEMO

Answer 3

如果您只想使用javascript，请使用此代码。

var allDivs = document.getElementsByClassName("mainText");
for(var i=0; i<allDivs.length; i++){
    //firstElementChild referes the first element of div
   allDivs[i].firstElementChild.className = 'mainPhoto';    
}

您可以在http://jsfiddle.net/7DS5F/19/

上进行演示

如何从多个地方的父级获取第一个元素

3 个答案: