Проблемы с селекторами JQuery и "есть" - PullRequest
Новая
       21

Проблемы с селекторами JQuery и "есть"

2 голосов
/ 20 мая 2009

Мне трудно понять, почему определенный селектор не работает для меня. По общему признанию я немного новичок JQuery.

Это правильно выбирает first 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 ]

2 голосов
/ 20 мая 2009

ОБНОВЛЕНИЕ: Это работает для первого элемента. 

$('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");
}
2 голосов
/ 20 мая 2009

Если вы хотите навести указатель мыши только в первый раз в окне редактирования класса внутри 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");
})
0 голосов
/ 20 мая 2009 
    $('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");
    })
0 голосов
/ 20 мая 2009

ты пробовал 

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...