代码之家 › 专栏 › 技术社区 › Mike

选择第一个同级

jquery-1.3.2 siblings dom html jquery

Mike · 技术社区 · 15 年前

我试图在一个我无法更改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);
}

5 回复 | 直到 12 年前

Jan HanÄiÄ 15 年前

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

这将选择图像的父tr中的第一个td元素(:第一个子过滤器)。 parents() 返回元素的所有父元素,我们过滤父元素以便只返回tr元素。

也可以尝试这样写你的图像:

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

你的功能是这样的:

function doSomething ( imgEl ) {
}

和使用 imgEl 而不是 this

Reigel Gallarde 15 年前

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

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

});

Kordonme 15 年前

我会使用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);
}

你说得对。没有传递此“”,您需要编辑HTML以使其生效。或者只使用jquery,如上所示。

Reigel 15 年前

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

区别

如果要使用它访问处理事件的HTML元素,则必须确保此关键字实际上已写入onclick属性。只有在这种情况下,它才会引用事件处理程序注册到的HTML元素。所以如果你这样做的话

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

你得到

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

如您所见,这个关键字出现在onclick方法中。因此它引用了html元素。

但是如果你这样做

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

你得到

function onclick()
{
    doSomething()
}

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

Lance Cleveland 12 年前

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

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

这是因为我们的表单元格具有类,例如每行都有19191911919。

但是,您可以使用jquery中的其他选择器。例如.children(“myid”),如果您在单元格191919199191上设置了ID属性以及其他任何选择器(如.children(td:first))以获取同一行上的第一个单元格。