選擇第一個兄弟

我想在不能改變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>

我想通過以下獲得第一<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>[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); 
}

來源

2010-01-27 Mike

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

這將選擇第一個TD元素（：第一個孩子過濾器）的父TR中的圖片。 parents()返回元素的所有父項，我們篩選父項，以便只返回TR元素。

也可以嘗試寫你的形象，像這樣：

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

和你的功能，像這樣：

function doSomething (imgEl) { 
}

，並使用imgEl代替this

來源

2010-01-27 11:06:35

我仍然得到這個空值。我懷疑'this'鏈接不能解析原始對象。 – Mike 2010-01-27 11:09:35

我剛剛更新了我的答案，現在就試試。 – 2010-01-27 11:10:07

謝謝。看起來我可能不得不進入並破解渲染表的代碼。 :)我希望不必這樣做。 – Mike 2010-01-27 11:15:34

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

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

});

來源

2010-01-27 11:08:17 Reigel

我會成立一個使用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-27 11:13:07 Kordonme

雖然'：last'只匹配一個元素：最後一個挑選的元素，'last-child'匹配多於一個：每個父級一個。 – Reigel 2010-01-27 11:25:30

@Reigel：你說的沒錯。我已經改變了答案。謝謝。 – Kordonme 2010-01-27 11:29:54

也許這會幫助別人。這只是整篇文章here的一部分。

的差異

如果您想要使用此訪問正在處理該事件的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方法中，因此它不引用HTML元素。

來源

2010-01-27 13:21:24 Reigel

我們有一個錶行，其中一列是動作，其他列包含數據。其中一列包含產品代碼（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-21 16:00:40

選擇第一個兄弟

回答

相關問題