：影響所有孩子的第一個孩子

Question

您好我正在嘗試將目標放在.current-cat-parent下的第一個<a>元素，但是我的jquery代碼正在影響下方的所有<a>元素。我怎樣才能瞄準第一個即時<a>元素？謝謝！

$(".current-cat-parent a:first-child").click(function(e){ 
      e.preventDefault(); 
      if($(this).hasClass('hide')){ 
      $(this).next().slideDown(800); 
      $(this).removeClass('hide'); 
      } else { 
      $(this).next().slideUp(800); 
      $(this).addClass('hide'); 
      } 
    }); 

<li class="cat-item cat-item-1 current-cat-parent"> 
    <a title="View all posts filed under Clothing" href="http://site.com/category/clothing">Clothing</a> 
    <ul class="children"> 
    <li class="cat-item cat-item-3"><a title="View all posts filed under Jeans" href="http://site.com/category/clothing/jeans">Jeans</a></li> 
    <li class="cat-item cat-item-2 current-cat"><a title="View all posts filed under Suits" href="http://site.com/category/clothing/suits">Suits</a></li> 
    </ul> 
</li> 

Answer 1

您可以使用eq()瞄準第一孩子。

$(".current-cat-parent a:eq(0)") 

Answer 2

應該

$(".current-cat-parent a:eq(0)").click(function(e){ 

Answer 3

如果您在HTML標記仔細觀察，你會發現，所有的a元素也各自父母的first-child。該解決方案是使用這些選擇之一：

.current-cat-parent > a 
.current-cat-parent a:first 
.current-cat-parent a:eq(0) 

注意:first和:first-child是不一樣的。

Answer 4

取而代之的是：

$(".current-cat-parent a:first-child") 

使用直接子>：

$(".current-cat-parent > a:first-child") 

注：

我認爲你的主要問題是.hide CSS類。你爲什麼需要它？我建議你讓它成爲一個空白的CSS類或刪除它。

Fiddle