Можно ли повторно вызвать успешный селектор jQuery?

Question

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

$('element1, element2, element3').click(function() {
    $('#header' + successfulElement).addClass('active');
    });

Затем, если пользователь нажимает любую из этих elements (их может быть несколько по всему документу), мы проверяем, находится ли элемент с тем же селектором ниже #header.

Это имеет смысл? Звучит сложно, но я бы не удивился, если бы мне здесь не хватало чего-то фундаментального.

Заранее спасибо.

Answer 1

Использование closest():

$('element1, element2, element3').click(function() {
    var $this = $(this);

    if ($this.closest("#header").length)
        $this.addClass('active');
});

Вы также можете использовать parents(), но closest() выполняет ту же работу, за исключением того, что останавливается, когда достигает подходящего элемента (поэтому он работает лучше).

Answer 2

Не существует общего способа узнать, какая часть селектора соответствует данному элементу, но если ваши селекторы имеют определенную форму, вы можете использовать определенные свойства.Например, если каждый elementN является тегом HTML, вы можете использовать this.tagName для восстановления соответствующего тега:

$('element1, element2, element3').click(function() {
  $('#header ' + this.tagName).addClass('active');
});

Аналогично, вы можете использовать this.className для получения имени (имен) классаэлемента, по которому щелкнули.

---

Обновление: Поскольку ваши селекторы довольно сложны, единственным выходом может быть привязка отдельных обработчиков для каждого субселектора.Вы можете автоматически генерировать эти обработчики следующим образом:

function bindClick(selector) {
  $(selector).click(function() {
    $('#header ' + selector).addClass('active');
  });
}

var selectors = [ 'a[href*="/el1"]', 'a[href*="/el2"]', 'a[href*="/el3"]' ];
for (var i = 0; i < selectors.length; i++)
  bindClick(selectors[i]);

Answer 3

Можете ли вы полностью обойти проблему, предоставив рассматриваемым элементам некоторую общность (например, используя общий атрибут данных), а затем сделав следующее?

$("selector1, selector2, selector3").bind("click", activate);

function activate(e){
    $(".active").removeClass("active");
    $("[data-id='" + $(this).attr("data-id") + "']",
        $("header")).addClass("active").trigger("some event");
}