22

我正在尝试在无法更改 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);
}
4

6 回答 6

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

于 2010-01-27T11:06:35.310 回答
2 
$('tr td:last-child img').click(function(){

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

});
于 2010-01-27T11:08:17.863 回答
2

我会使用 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，如上所示。

于 2010-01-27T11:13:07.680 回答
0

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

区别

如果您想使用 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 元素。

于 2010-01-27T13:21:24.860 回答
0

我们有一个表格行，其中一列是操作，其他列包含数据。其中一列包含产品代码 (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) 以获取同一行的第一个单元格。

于 2012-04-21T16:00:40.287 回答
0

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

function doSomething(el) {
    var temp = el.closest('tr').firstElementChild.innerHTML;
    alert("you clicked: " + temp);
}
于 2020-06-25T08:58:48.833 回答