jQuery 选择第一个兄弟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2146269/
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 first sibling
提问by Mike
I'm trying to select the inner value of the first sibling - using jQuery - in an environment where I cannot alter the html markup.
我正在尝试在无法更改 html 标记的环境中选择第一个兄弟的内部值 - 使用 jQuery。
I have the following:
我有以下几点：
<tr>
<td>3</td>
<td>bob</td>
<td>smith</td>
<td>[email protected]</td>
<td>
<img src="bobsmith.png" onclick="doSomething()" />
</td>
</tr>
I'm trying to get the value of the first <td>with the following:
我试图通过以下方式获得第一个的价值<td>：
function doSomething() {
var temp = $(this).parent().parent().children().filter(':first');
alert("you clicked person #" + temp.html());
}
All I get from this is null.
我从中得到的只是null.
I've tried various combinations with with the .siblings()function too, but to no avail.
我也尝试过与该.siblings()功能的各种组合，但无济于事。
Any ideas?
有任何想法吗？
Thanks,
谢谢，
Note:I forgot to mention that the table the excerpt is from is dynamically loaded & refreshed from an ajax call. This may be pertinent for suggestions that include binds.
注意：我忘了提到摘录来自的表是从 ajax 调用动态加载和刷新的。这可能与包含绑定的建议有关。
Solution:I've gone with the following solution, inspired by the accepted answer:
解决方案：受已接受的答案启发，我采用了以下解决方案：
<tr>
<td>3</td>
<td>bob</td>
<td>smith</td>
<td>[email protected]</td>
<td>
<img src="bobsmith.png" onclick="doSomething(this)" />
</td>
</tr>
and for the jQuery javascript:
对于 jQuery javascript：
function startStopNode(el) {
var temp = $(el).parent().siblings(':first').html();
alert("you clicked: " + temp);
}
采纳答案by Jan Han?i?
$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();
This will select the first TD element (:first-child filter) in the parent TR of the image. parents()returns all parents of the element, and we filter the parents so that only TR elements are returned.
这将选择图像父 TR 中的第一个 TD 元素（:first-child filter）。parents()返回元素的所有父元素，我们过滤父元素以便只返回 TR 元素。
Also try writing your image like so:
也试着像这样写你的形象：
<img src="bobsmith.png" onclick="doSomething(this)" />
and your function like so:
你的功能是这样的：
function doSomething ( imgEl ) {
}
and use imgElinstead of this
并使用imgEl代替this
回答by Reigel
$('tr td:last-child img').click(function(){
alert($('td:first-child',$(this).closest('tr')).text());
});
回答by Kordonme
I would set up an event using jQuery, but that's totally up to you.
我会使用 jQuery 设置一个事件，但这完全取决于您。
$("table td:last img").click(function() {
var firstTd = $(this).parents("tr").find("td:first").html();
alert("you clicked person #" + firstTd);
});
No matter what, you can still use this example with your own code:
不管怎样，你仍然可以用你自己的代码使用这个例子：
function doSomething()
{
var firstTd = $(this).parents("tr").find("td:first-child").html();
alert("you clicked person #" + firstTd);
}
You're right. 'this' is not being passed, you need to edit the html to make that work. Or just use jQuery instead as show above.
你是对的。'this' 没有被传递，您需要编辑 html 以使其工作。或者只是使用 jQuery 代替，如上所示。
回答by Reigel
maybe this will help somebody. This is just a part of the whole article here.
也许这会帮助某人。这只是这里整篇文章的一部分。
The difference
区别
If you want to use this for accessing the HTML element that is handling the event, you must make sure that the this keyword is actually written into the onclick property. Only in that case does it refer to the HTML element the event handler is registered to. So if you do
如果您想使用它来访问正在处理事件的 HTML 元素，您必须确保 this 关键字实际上已写入 onclick 属性。只有在这种情况下，它才引用事件处理程序注册到的 HTML 元素。所以如果你这样做
element.onclick = doSomething;
alert(element.onclick)
you get
你得到
function doSomething()
{
this.style.color = '#cc0000';
}
As you can see, the this keyword is present in the onclick method. Therefore it refers to the HTML element.
如您所见， this 关键字存在于 onclick 方法中。因此它指的是 HTML 元素。
But if you do
但是如果你这样做
<element onclick="doSomething()">
alert(element.onclick)
you get
你得到
function onclick()
{
doSomething()
}
This is merely a reference to function doSomething(). The this keyword is not present in the onclick method so it doesn't refer to the HTML element.
这仅仅是对函数 doSomething() 的引用。onclick 方法中不存在 this 关键字，因此它不引用 HTML 元素。
回答by Lance Cleveland
We have a table row where one column is the action, other columns contain data. One of the columns contains the product code (UPC). So we use this to display the product code whenever someone clicks an action button:
我们有一个表格行，其中一列是操作，其他列包含数据。其中一列包含产品代码 (UPC)。因此，每当有人单击操作按钮时，我们都会使用它来显示产品代码：
var product_code = jQuery(obj).parents('tr').children('.upc').text();
alert('product code'+product_code);
This works because our table cells have classes, such as 1919191911919 for every row.
这是有效的，因为我们的表格单元格有类，例如每一行都有 1919191911919。
You can use other selectors from jQuery, however. Such as .children('#myid') if you have id attributes set on the cell 19191919199191 as well as any number of the other selectors like .children(td:first) to get the first cell on the same row.
但是，您可以使用来自 jQuery 的其他选择器。例如 .children('#myid') 如果您在单元格 19191919199191 以及任意数量的其他选择器上设置了 id 属性，例如 .children(td:first) 以获取同一行的第一个单元格。
