当前位置:  开发笔记 > 编程语言 > 正文

在jQuery中选择当前元素

如何解决《在jQuery中选择当前元素》经验,为你挑选了3个好方法。

我有这样的HTML代码:

Link A1 Link A2 Link A3
Link B1 Link B2 Link B3

当用户从上面的HTML中单击链接时,我想获取相应元素的jQuery对象,然后操纵它的兄弟.除了为每个元素创建一个ID ,并将该ID传递给onclick事件处理程序之外,我想不出任何其他方法.我真的不想使用ID.

有什么建议?



1> Shog9..:

幸运的是,jQuery选择器允许您更自由:

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

...将指定的回调附加到a中包含的每个回调

.


您还可以使用事件委派并将事件处理程序附加到div.然后测试点击以查看目标是否为:$("div").click(function(e){if($(e.target).is("a"){/*do work*/}} );您还可以获得能够在不添加新事件处理程序的情况下向div添加"a"的好处.

2> Matthew Crum..:

当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,以便在"parent()"之后需要"next()"或"prev()"



3> Alex Barrett..:

你会发现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()组合将允许您操纵所需元素的任意组合.

编辑:Mark留下的关于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
});

我认为它实际上将事件绑定到根元素,但效果是一样的.它不仅更灵活,而且在很多情况下也提高了性能.请务必阅读文档以避免任何问题.

推荐阅读
mobiledu2402851203
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有