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");
}

是否可以重新调用成功的jQuery选择器？

3 个答案: