2012-05-10 116 views
0

最後的元素,我很新的JQuery所以這可能是一個容易...選擇父母

考慮這個HTML結構 - 我知道這是不是合法的HTML,但是這不是問題的關鍵:

<table id="mytable"> 
<tr> 
    <td><input type="checkbox" checked="checked" /></td> 
    <td>1.2</td> 
    <td>1.3</td> 
</tr> 
<tr> 
    <td><input type="checkbox" checked="checked" /></td> 
    <td>2.2</td> 
    <td>2.3</td> 
</tr> 
<tr> 
    <td><input type="checkbox" /></td> 
    <td>3.2</td> 
    <td>3.3</td> 
</tr> 
</table> 

基本上我需要從每個表格行中選擇複選框標記的最後一個表格單元格,在這種情況下,表格單元格包含「1.3」和「2.3」(而不是「3.3」)。找到選中的複選框很簡單,但不知何故,我總是隻以最後一個表格行的最後一個表格單元(「2.3」)結束。有人知道這個解決方案嗎?

回答

3

像這樣的東西可能:

var foo = $('#mytable tr:has("input:checked") td:last-child'); 
+0

不錯的解決方案,即使其他建議也是有效的,我會繼續使用這個。我猜在使用CSS選擇器時性能會好一些嗎? –

+0

至於性能,如果不進行性能測試(有時候CSS選擇器速度更快,有時候方法是這樣),我真的無法分辨出來,但這樣做的兩件事情是(1)可讀性(heck,這是一個(2)它使用':has()',它是爲你的特定用例設計的選擇器(即包含'element'的'element')。實際上,它們很少被利用。 :D –

0
var result; 

$('#mytable tr').each(function() { 
    if ($(this).find('input').attr('checked') == 'checked') {   
     result = $(this).children('td:last-child').html(); 
     alert(result); 
    }  
}) 
0

有可能做到這一點更簡單的方法,但是這是我的解決方案:

$("#mytable td input:checked") 
    .parent().parent() 
    .find("td:last") 
    .css("color","red");​ 

要查看工作示例:http://jsfiddle.net/exQZJ/

+0

'$(「#mytable td input:checked」)。closest('tr')。find('td:last')。css({color:「red」});'現在我們使用'.closest ()'而不是'.parent()。parent()。parent()。parent()'http://jsbin.com/oduguk/edit#javascript,html,live –

+0

感謝解決方案和jsfiddle示例JAstanton !事實證明,這與我最初的嘗試非常接近,除了找到竅門的.find之外 –