jQuery 类选择器和 $(this)答案

【问题标题】：jQuery class selectors and $(this)jQuery 类选择器和 $(this)
【发布时间】：2011-07-26 08:02:45
【问题描述】：

我有一个要调用的插件，并使用 DOM 中定义的参数中的属性。例如

<a href="somewhere.html" class="my_a">blah</a>

而且我有一个“盒子”插件，所以我想做

$(".my_a").box({

attribute1: "something",
attribute2: $(this).attr('href')
});

因此传递给 box 函数的参数之一是来自被单击类的 a 的 href 值，但是使用 $(this) 似乎不起作用。

有什么想法吗？

【问题讨论】：

你查看插件手册了吗？

标签： jquery jquery-selectors this

【解决方案1】：

由于您使用的是类名选择器，我建议缓存元素查找

var el = $(".my_a");
el.box({
   attribute1: "something",
   attribute2: el.attr('href')
});

【讨论】：

您为什么要这样做？只需在 box 函数内使用this（而不是按照他上面尝试的方式）来做你想做的任何事情。当您已经在 jQuery 对象中拥有链接时，传递链接的 href 是没有意义的。请参阅下面的答案
我假设“box” jQuery 插件来自第三方，您不能或不想更改其内部结构。
a，很公平，我假设他正在编写盒子插件

【解决方案2】：

this 在此时针对目标元素不在正确的上下文中。

您需要单独收集信息并将其传递给盒子插件，或修改插件本身。

$('.my_a').click(function( e ){

    var el = $(e.currentTarget);

    e.preventDefault();

    el.box({

        attribute1: 'something',
        attribute2: el.attr('href')

    });

});

我假设盒子插件处理点击事件，所以这不是最好的例子，但它是获取实际点击元素属性的唯一方法。

【讨论】：

如果链接被分组在一个共同的父元素下，最好使用 .delegate() 然后一个类选择器将单独绑定到每个元素api.jquery.com/delegate

【解决方案3】：

$(this).attr('href') 假定您在 .my_a 对象的事件范围内，但您不在此范围内！

为此，您必须通过 $('.my_a').attr('href') 调用它

【讨论】：

【解决方案4】：

您可以为每个具有指定类的元素调用box方法。

$(".my_a").each(function() {
    $(this).box({
        attribute1: "something",
        attribute2: $(this).attr('href')
    });
});

此代码遍历所有具有类my_a 的元素并设置它们的box。

【讨论】：

【解决方案5】：

您不需要将链接的属性传递给您的函数。

一旦你进入你的盒子函数，你就可以设置你想要的任何属性。例如：

$.fn.box = function(attributes){
  // this now refers to a jQuery object that contains your link.  So use it here
  var href = this.attr('href');
  // so something with attributes and href
}

我不知道你在你的 box 函数中做了什么，所以很难进一步评论，但是你没有理由想要传递你用 jquery 获取的同一个链接的属性。

【讨论】：

我同意，但我不清楚他是否正在编写插件。

【解决方案6】：

使用this 将不起作用，我认为在这种情况下，因为this 属性是指您传递给box() 的对象（例如{attribute1: .., attribute2: ...}）......所以你应该这样做：@987654325 @

编辑：

$(".my_a").each(function(i, el){
    $(el).box({
        attribute1: "something",
        attribute2: $(el).attr("href")
    });
});

【讨论】：

那不行，因为如果我有几个同一个类的链接，它只会抓取第一个链接的href
您最好不要传入您实际尝试修改的东西的属性（如果您的链接更改，您必须更改它）。在该框功能内，他将可以访问this，并且可以在那里做任何他想做的事情
“el”设置为什么？如果它设置为您需要的元素，则无需使用 $() 再次查找它