2

特定のセレクターが機能しない理由がわかりません。確かに、私は少し 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でこれを行う適切な方法を学ぼうとしています.

4

4 に答える 4

2

div内のクラスエディットボックスの最初の出現だけにマウスオーバーしたい場合

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

編集

$('div.editbox').mouseover(function() {
   $(this).css("border", "1px solid yellow");
}).filter(':first').mouseover(function(){
  $(this).css("border", "1px solid red");
}).filter(':last').mouseover(function(){
  $(this).css("border", "1px solid blue");
})
于 2009-05-20T16:13:52.630 に答える
2

更新：これは最初の要素で機能します。

$('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");
}
于 2009-05-20T16:19:19.390 に答える
0

試しましたか

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}
于 2009-05-20T16:16:19.317 に答える
0 
    $('div.editbox').mouseover(function() {
       //change the css for all the elements
       $(this).css("background-color", "yellow");
    })
    .filter(':first,:last').mouseover(function(){
      //execlude the first and the last
      $(this).css("background-color", "Blue");
    })
于 2009-05-20T16:38:36.713 に答える