在 jQuery 中选择当前元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/361717/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select current element in jQuery
提问by Salamander2007
I have HTML code like this :
我有这样的 HTML 代码：
<div>
<a>Link A1</a>
<a>Link A2</a>
<a>Link A3</a>
</div>
<div>
<a>Link B1</a>
<a>Link B2</a>
<a>Link B3</a>
</div>
When user clicks a link from above HTML, I want to get the jQuery object of the corresponding <a>element, and then manipulate its sibling. I can't think of any way other than creating an ID for each <a>element, and passing that ID to an onclick event handler. I really don't want to use IDs.
当用户单击 HTML 上方的链接时，我想获取相应<a>元素的 jQuery 对象，然后操作其兄弟元素。除了为每个<a>元素创建一个 ID并将该 ID 传递给 onclick 事件处理程序之外，我想不出其他任何方法。我真的不想使用 ID。
Any suggestions?
有什么建议？
回答by Shog9
Fortunately, jQuery selectors allow you much more freedom:
幸运的是，jQuery 选择器为您提供了更多的自由：
$("div a").click( function(event)
{
var clicked = $(this); // jQuery wrapper for clicked element
// ... click-specific code goes here ...
});
...will attach the specified callback to each <a>contained in a <div>.
...将指定的回调附加到<a>包含在<div>.
回答by Matthew Crumley
When the jQuery click event calls your event handler, it sets "this" to the object that was clicked on. To turn it into a jQuery object, just pass it to the "$" function: $(this). So, to get, for example, the next sibling element, you would do this inside the click handler:
当 jQuery 单击事件调用您的事件处理程序时，它会将“this”设置为被单击的对象。为了把它变成一个jQuery对象，只是把它传递给“$”功能：$(this)。因此，例如，要获取下一个同级元素，您可以在点击处理程序中执行以下操作：
var nextSibling = $(this).next();
Edit:After reading Kevin's comment, I realized I might be mistaken about what you want. If you want to do what he asked, i.e. select the corresponding link in the other div, you could use $(this).index()to get the clicked link's position. Then you would select the link in the other div by its position, for example with the "eq" method.
编辑：阅读凯文的评论后，我意识到我可能误解了你想要什么。如果你想按照他的要求去做，即在另一个div中选择相应的链接，你可以使用$(this).index()来获取点击链接的位置。然后，您可以按位置选择另一个 div 中的链接，例如使用“eq”方法。
var $clicked = $(this);
var linkIndex = $clicked.index();
$clicked.parent().next().children().eq(linkIndex);
If you want to be able to go both ways, you will need some way of determining which div you are in so you know if you need "next()" or "prev()" after "parent()"
如果您希望能够双向进行，您将需要某种方法来确定您所在的 div，以便您知道在“parent()”之后是否需要“next()”或“prev()”
回答by Alex Barrett
You will find the siblings()and parent()methods useful here.
您会发现siblings()和parent()方法在这里很有用。
// assuming A1 is clicked
$('div a').click(function(e) {
$(this); // A1
$(this).parent(); // the div containing A1
$(this).siblings(); // A2 and A3
});
Combining those methods with andSelf()will let you manipulate any combination of those elements you want.
将这些方法与andSelf()结合起来可以让您操纵您想要的这些元素的任意组合。
Edit: The comment left by Mark regarding event delegation on Shog9's answer is a very good one. The easiest way to accomplish this in jQuery would be by using the live()method.
编辑：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
});
I think it actually binds the event to the root element, but the effect is that same. Not only is it more flexible, it also improves performance in a lot of cases. Just be sure to read the documentation to avoid any gotchas.
我认为它实际上将事件绑定到根元素，但效果是一样的。它不仅更加灵活，而且在很多情况下还提高了性能。请务必阅读文档以避免任何问题。
回答by Ayman
I think by combining .children()with $(this)will return the children of the selected item only
我认为通过将.children()与$(this) 结合将仅返回所选项目的子项
consider the following:
考虑以下：
$("div li").click(function() {
$(this).children().css('background','red');
});
this will change the background of the clicked li only
这只会改变被点击的 li 的背景
回答by Josh Delsman
To select the sibling, you'd need something like:
要选择兄弟姐妹，您需要以下内容：
$(this).next();
So, Shog9's comment is not correct. First of all, you'd need to name the variable "clicked" outside of the div click function, otherwise, it is lost after the click occurs.
所以，Shog9 的评论是不正确的。首先，您需要在 div 单击函数之外将变量命名为“clicked”，否则，单击发生后它会丢失。
var clicked;
$("div a").click(function(){
clicked = $(this).next();
// Do what you need to do to the newly defined click here
});
// But you can also access the "clicked" element here
