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

Какие-либо предложения?

12.12.2008 02:33:18
Если щелкнуть ссылку А1, получить ссылку В1 и наоборот?
Kevin Gorski 12.12.2008 02:45:30
Нет. Если щелкнуть A1, я хочу манипулировать A2 и A3 и их родительским DIV, но не B1, B2 и B3.
Salamander2007 12.12.2008 04:22:30
5 ОТВЕТОВ
РЕШЕНИЕ

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

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

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

70
12.12.2008 02:39:02
Вы также можете использовать делегирование событий и прикрепить обработчик событий к div. Затем проверьте щелчок, чтобы увидеть, была ли цель: $ ("div"). Click (function (e) {if ($ (e.target) .is ("a") {/ * do work * /}} ); Вы также получите возможность добавлять «a» в div без добавления новых обработчиков событий.
Mark 6.02.2009 20:15:19

Когда событие click 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 ()»

9
9.08.2012 18:44:42
Нет, я не хочу выбирать ссылку в другом DIV.
Salamander2007 12.12.2008 04:46:15

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

$(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
0
12.12.2008 16:26:55

Здесь вы найдете методы 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
});

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

5
17.09.2009 11:51:12

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

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

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

это изменит фон только щелкнувшего li

1
16.09.2010 08:03:31