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:first-child")

使用直接子>：

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

注意：

我认为您的主要问题是.hide css类。你为什么需要它？我建议你把它变成一个空白的css类或删除它。

Fiddle

Answer 3

应该是

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

Answer 4

如果仔细查看HTML标记，您会注意到所有a元素也是其各自父母的first-child。解决方案是使用以下选择器之一：

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

请注意，:first和:first-child不一样。

：影响所有孩子的第一个孩子

4 个答案:

注意：

Fiddle