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

У меня есть 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. Я действительно не хочу использовать идентификаторы.

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

Ответы

Ответ 1

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

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

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

Ответ 2

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

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()"

Ответ 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
});

Объединение этих методов с 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
});

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

Ответ 4

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

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

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

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

Ответ 5

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

$(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