Question

在以下标记中，我想找到仅包含类.hide的第一个元素，并通过点击.add a更改其类。

但我无法找到班级。

<div class="field">default</div>
<div class="field hide">find this 1</div>
<div class="field hide">and then this 2</div>
<div class="field hide">and then this 3 </div>
<div class="field hide">and then this 4</div>
<div class="field add"><a>Add more</a></div>

这是我尝试的内容：

$('.add a').click(function(e) {
    e.preventDefault();                     
    $(this).parent().siblings().find(".hide").removeClass("hide").addClass("show");
});

的jsfiddle： http://jsfiddle.net/ok38wrnt/

Answer 1

使用索引为0的:eq选择器仅定位第一个元素：

$(this).parent().siblings(".hide:eq(0)")

<强> Working Demo

Answer 2

find下的{p> siblings()错误，因为兄弟姐妹是您想要的项目。

改为使用filter：

然后，您只需将:first添加到.hide即可获得第一场比赛。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/ok38wrnt/2/

$('.add a').click(function (e) {
    e.preventDefault();
    $(this).parent().siblings().filter(".hide:first").removeClass("hide").addClass("show");

});

缩短为：

http://jsfiddle.net/TrueBlueAussie/ok38wrnt/5/

 $(this).parent().siblings(".hide:first").removeClass("hide").addClass("show");

你可能可能会使用toggleClass代替，假设你永远不会丢失这两个类（或者你最终会使用这两个类）。

Answer 3

.hide元素是a元素的兄弟元素。父，所以你应该使用siblings()选择器。您还需要使用:first来匹配找到的第一个元素。试试这个：

$('.add a').click(function(e) {
    e.preventDefault();
    $(this).parent().siblings('.hide:first').toggleClass("hide show");
});

Updated fiddle

Answer 4

Jquery还提供first()方法。

$('.add a').click(function(e) {
    e.preventDefault();                     
          $('.hide').first().removeClass("hide").addClass("show");

});

Fiddle

只使用jQuery查找第一个类

4 个答案: