Выберите текущий элемент в 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 вызывает ваш обработчик события, оно устанавливает «this» для объекта, по которому щелкнули. Чтобы превратить его в объект jQuery, просто передайте его функции "$": $(this). Таким образом, чтобы получить, например, следующий элемент-брат, вы должны сделать это в обработчике кликов:

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

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

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

Если вы хотите иметь возможность идти обоими путями, вам понадобится какой-то способ определить, в каком div вы находитесь, чтобы вы знали, нужно ли вам «next ()» или «prev ()» после «parent ()»

Answer 3

Здесь вы найдете методы siblings () и parent () .

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

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

Редактировать: Комментарий, оставленный Марком относительно делегирования события на ответ 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 4

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

учтите следующее:

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

это изменит фон только для нажатой li

Answer 5

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

$(this).next();

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

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