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

У меня возникли трудности с пониманием того, почему конкретный селектор не работает для меня. По общему признанию, я немного новичок в JQuery.Проблемы с селекторами 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: первый», «.editbox сНу: первый» и т.д.

По сути, я хочу, чтобы иметь возможность надежно проверить, является ли первый или последний элемент с именем класса.

Спасибо!

Edit: вот 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.

источник

2009-05-20 SylvanK

так что вы хотите событие только переплетены курсора, находящегося на первом? – TStamper

UPDATE: Это работает для первого элемент.

$('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-20 16:19:19

Спасибо, но это только выбирает, если это первый ребенок родительского контейнера; а не первый элемент с именем класса. – SylvanK

Пожалуйста, попробуйте мое обновление –

Извините, не забирает его вообще. Я добавлю html, который я использую выше. – SylvanK

Если вы хотите MouseOver на только первое вхождение класса EditBox внутри DIV

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

Edit

$('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-20 16:13:52 TStamper

Thanks TStamper; CSS является лишь примером. У меня есть функция, работающая на всех элементах, но я хочу, чтобы она вела себя по-разному на первом и последнем элементах, поэтому мне нужно иметь возможность обнаруживать, когда функция работает внутри них. – SylvanK

обновлено для сравнения для всех – TStamper

Мне очень жаль TStamper; Я ценю подход, который вы принимаете, но я прикрепляю к каждому элементу обработчик событий с умеренно сложной сложностью. Ваш подход будет означать, что мне нужно иметь 3 отдельных версии этой функции; или поочередно, принять аргумент функции, связанный с тем, является ли это первым, последним или средним элементом. Я полагаю, что этот подход может работать, но опять же, я пытаюсь найти «правильный» JQuery способ сделать это. Является ли то, что я делаю с $ (this) .is (". Class: first"), действительно не работает? – SylvanK

есть у попытался

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}

источник

2009-05-20 16:16:19 ssmithstone

Это снова ловит каждую ячейку. – SylvanK

$('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-20 16:38:36

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

ответ

Смежные вопросы