选择第一个兄弟姐妹

Question

我试图在无法更改 html 标记的环境中使用 jQuery 选择第一个同级的内部值。

我有以下内容：

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething()" />
    </td>
</tr>

我正在尝试使用以下内容获取第一个 的值：

function doSomething() {
    var temp = $(this).parent().parent().children().filter(':first');
    alert("you clicked person #" + temp.html());
}

我从中得到的只是 null。

我也尝试了与 .siblings() 函数的各种组合，但无济于事。

有什么想法吗？

谢谢，

注意：我忘了提及摘录的表格是动态加载的并且是动态加载的。从 ajax 调用刷新。这可能与包含绑定的建议有关。

解决方案： 受到公认答案的启发，我采用了以下解决方案：

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>[email protected]</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething(this)" />
    </td>
</tr>

对于 jQuery javascript：

function startStopNode(el) {
    var temp = $(el).parent().siblings(':first').html();
    alert("you clicked: " + temp);
}

Answer 1

$( 'td:first-child', $( this ).parents ( 'tr' ) ).html ();

这将选择图像的父 TR 中的第一个 TD 元素（：first-child 过滤器）。 parents() 返回元素的所有父元素，我们过滤父元素以便仅返回 TR 元素。

还可以尝试像这样编写您的图像：

<img src="bobsmith.png" onclick="doSomething(this)" />

以及像这样编写您的函数：

function doSomething ( imgEl ) {
}

并使用 imgEl 而不是 this

Answer 2

$('tr td:last-child img').click(function(){

    alert($('td:first-child',$(this).closest('tr')).text());

});

Answer 3

我会使用 jQuery 设置一个事件，但这完全取决于你。

$("table td:last img").click(function() {
    var firstTd = $(this).parents("tr").find("td:first").html();
    alert("you clicked person #" + firstTd);
}); 

无论如何，您仍然可以在自己的代码中使用此示例：

function doSomething()
{
    var firstTd = $(this).parents("tr").find("td:first-child").html();
    alert("you clicked person #" + firstTd);
}

---

您是对的。 'this' 没有被传递，您需要编辑 html 才能使其工作。或者只是使用 jQuery，如上所示。

Answer 4

也许这会对某人有所帮助。这只是此处整篇文章的一部分。

区别

如果您想使用 this 来访问正在处理该事件的 HTML 元素，则必须确保 this 关键字实际上已写入 onclick 属性中。仅在这种情况下，它才会引用事件处理程序注册到的 HTML 元素。因此，如果您这样做，

element.onclick = doSomething;
alert(element.onclick)

您

function doSomething()
{
    this.style.color = '#cc0000';
}

会看到，this 关键字出现在 onclick 方法中。因此它指的是 HTML 元素。

但如果你这样做，

<element onclick="doSomething()">
alert(element.onclick)

你会得到

function onclick()
{
    doSomething()
}

This is just a reference to function doSomething()。 onclick 方法中不存在 this 关键字，因此它不引用 HTML 元素。

Answer 5

我们有一个表行，其中一列是操作，其他列包含数据。其中一列包含产品代码 (UPC)。因此，每当有人单击操作按钮时，我们就使用它来显示产品代码：

var product_code = jQuery(obj).parents('tr').children('.upc').text();
alert('product code'+product_code);

这是有效的，因为我们的表格单元格都有类，例如每行都有 1919191911919。

不过，您可以使用 jQuery 中的其他选择器。例如 .children('#myid') 如果您在单元格 19191919199191 上设置了 id 属性，以及任意数量的其他选择器（如 .children(td:first) ）以获取同一行上的第一个单元格。

Answer 6

真的，在这个用例中不需要 jquery。因此，对于那些浏览一般答案而不是专门针对 jquery 的人，或者那些愿意寻求更高性能解决方案的人来说。该解决方案比 jquery 对应方案快大约 10 倍。 查看参考

function doSomething(el) {
    var temp = el.closest('tr').firstElementChild.innerHTML;
    alert("you clicked: " + temp);
}