我很难理解为什么特定选择器对我不起作用。诚然,我是一名JQuery新手。

这样可以正确选择页面上的第一个div.editbox并将其染成黄色:

$('div.editbox:first').css("background-color","yellow");


但是,此if ... is构造使鼠标悬停在每个框上时,突出显示了边框。

$('div.editbox').bind('mouseover', function(e) {
    if ($(this).is('div.editbox:first')) {$(this).css("border", "1px solid red");}
});


我尝试过各种变体,例如'.editbox:first','。editbox div:first'等。

本质上,我希望能够可靠地测试这是类名称的第一个元素还是最后一个元素。

谢谢!

编辑:这是我正在使用的HTML:

<body>
<div class="container">
<p></p>
<div class="editbox" id="box1">Foo</div>
<div class="editbox" id="box2">Bar</div>
<div class="editbox" id="box3">Baz</div>
<div class="responsebox" id="rbox"></div>
</div>
</body>


这只是概念验证页面;实际的页面当然会复杂得多。再说一次:我想要的是可靠地检测我在第一个还是最后一个“ div.editbox”中。我使用的解决方法是:

$('div.editbox:last').addClass("lasteditbox");


然后测试if ($(this).is(".lasteditbox"))是否有效,但看起来笨拙,我正在尝试学习使用JQuery进行此操作的正确方法。

最佳答案

更新:这适用于第一个元素。

$('div.editbox').bind('mouseover', function(e) {
 if ($("div.editBox").index(this) == 0) {
      $(this).css("border", "1px solid red");
    }
});


对于最后一个元素,此选择器有效:

if($("div.editBox").index(this) == ($("div.editBox").length-1)){
     $(this).css("color","red");
}

07-24 17:50