Выберите текущий элемент в JQuery

Question

У меня есть HTML-код, как это:

<div> 
     <a>Link A1</a> 
     <a>Link A2</a> 
     <a>Link A3</a> 
</div> 

<div> 
     <a>Link B1</a> 
     <a>Link B2</a> 
     <a>Link B3</a> 
</div> 

Когда пользователь нажимает на ссылку сверху HTML, я хочу, чтобы получить объект JQuery соответствующего <a> элемента, а затем манипулировать его брат или сестра. Я не могу думать ни о чем другом, кроме создания идентификатора для каждого элемента <a> и передачи этого идентификатора обработчику события onclick. Я действительно не хочу использовать идентификаторы.

Любые предложения?

Answer 1

К счастью, JQuery селекторы позволяют вам гораздо больше свободы:

$("div a").click(function(event) 
{ 
    var clicked = $(this); // jQuery wrapper for clicked element 
    // ... click-specific code goes here ... 
}); 

... присоединит указанный обратный вызов каждые <a>, содержащиеся в <div>.

Answer 2

Когда событие jQuery click вызывает ваш обработчик событий, он устанавливает «this» на объект, на который был нажат. Чтобы превратить его в объект jQuery, просто передайте его функции «$»: $(this). Таким образом, чтобы получить, например, следующий родственный элемент, вы могли бы сделать это внутри обработчика щелчка:

var nextSibling = $(this).next(); 

Edit: После прочтения комментария Кевина, я понял, что я могу ошибаться о том, что вы хотите. Если вы хотите сделать то, что он попросил, то есть выбрать соответствующую ссылку в другом div, вы можете использовать $(this).index(), чтобы получить позицию щелкнутой ссылки. Затем вы выберете ссылку в другом div по ее позиции, например, с помощью метода «eq».

var $clicked = $(this); 
var linkIndex = $clicked.index(); 
$clicked.parent().next().children().eq(linkIndex); 

Если вы хотите быть в состоянии идти в обоих направлениях, вы будете нуждаться в какой-то способ определить, какие Div вы находитесь в так что вы знаете, если вам нужно «следующий()» или «Prev()» после «родителя()»

Answer 3

Чтобы выбрать родственный, вам нужно что-то вроде:

$(this).next(); 

Таким образом, комментарий Shog9 не является правильным. Прежде всего, вам нужно будет указать переменную «clicked» вне функции «щелчок», иначе она будет потеряна после нажатия.

var clicked; 

$("div a").click(function(){ 
    clicked = $(this).next(); 
    // Do what you need to do to the newly defined click here 
}); 

// But you can also access the "clicked" element here 

Answer 4

Вы найдете siblings() и parent() методы полезны здесь.

// assuming A1 is clicked 
$('div a').click(function(e) { 
    $(this); // A1 
    $(this).parent(); // the div containing A1 
    $(this).siblings(); // A2 and A3 
}); 

Сочетание этих методов с andSelf() позволит вам управлять любой комбинацией этих элементов, которые вы хотите.

Редактировать: Комментарий, оставленный Марк относительно делегирования события на ответ Shog9, очень хороший. Самый простой способ выполнить это в jQuery можно с помощью метода live().

// assuming A1 is clicked 
$('div a').live('click', function(e) { 
    $(this); // A1 
    $(this).parent(); // the div containing A1 
    $(this).siblings(); // A2 and A3 
}); 

Я думаю, что это на самом деле связывает событие с корневым элементом, но эффект тот же. Он не только более гибкий, но и во многих случаях повышает производительность. Просто не забудьте прочитать документацию, чтобы избежать каких-либо ошибок.

Answer 5

Я думаю, объединив .дети() с $ (это) будет возвращать ребенок выбранного элемента только

рассмотрят следующие:

$("div li").click(function() { 
$(this).children().css('background','red'); 
}); 

это изменит фон нажатого лития только