jQuery 类选择器和 $(this)

Posted 2023-05-09

【中文标题】jQuery 类选择器和 $(this)

【英文标题】：jQuery class selectors and $(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) 似乎不起作用。

有什么想法吗？

【问题讨论】：

你查看插件手册了吗？

【参考方案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”设置为什么？如果它设置为您需要的元素，则无需使用 $() 再次查找它