选择第一个兄弟姐妹

Question

我正在尝试在无法更改 html 标记的环境中选择第一个兄弟的内部值 - 使用 jQuery。

我有以下几点：

<tr>
    <td>3</td>
    <td>bob</td>
    <td>smith</td>
    <td>bob@example.com</td>
    <td>
        <img src="bobsmith.png" onclick="doSomething()" />
    </td>
</tr>

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

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>bob@example.com</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

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

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

Answer 2

我们有一个表格行，其中一列是操作，其他列包含数据。其中一列包含产品代码 (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 3

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

区别

如果你想使用 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()
}

这只是对函数 doSomething() 的引用。 onclick 方法中不存在 this 关键字，因此它不引用 HTML 元素。

Answer 4

我会使用 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 5

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

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

});

Answer 6

$( '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