我很难理解为什么特定选择器对我不起作用。诚然,我是一名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");
}