jQuery的發現，有一類特殊的細胞上表行

假設我有一個表像這樣：jQuery的發現，有一類特殊的細胞上表行

<table> 
    <tr><td class="this-is-a-label">Label Cell</td></tr> 
    <tr><td>Detail 1</td></tr> 
    <tr><td class="selected">Detail 2</td></tr> 
</table>

我希望能夠抓住從「選擇」單元格前面的「標記細胞」。

我的jQuery腳本應該是這樣的：

$('.selected').each(function() { 
    var label = $(this).parent().prev('tr td.this-is-a-label'); 
    //... do what I need with the label ... 
});

但它不工作。

有沒有人有任何建議？

來源

2010-05-05 theShingles

你可以這樣做：

$('.selected').each(function() { 
    var label = $(this).closest('tr').prevAll('tr:has(td.this-is-a-label):first') 
        .children('td.this-is-a-label'); 
    //... do what I need with the label ... 
});

這不是理想的，雖然，這是一個相當昂貴的DOM遍歷，如果你能保證它總是2行的背後，你可以這樣做：

$(this).closest('tr').prev().prev().children('td.this-is-a-label')

......這要快得多，它只取決於您對標記的假設和保證，如果有任何確定性，您肯定可以使其更快。

來源

2010-05-05 23:19:07

是的，它是相當昂貴的，但它是必要的。不幸的是沒有任何保證。謝謝你的幫助。 – theShingles 2010-05-06 17:15:47

如何：

var label = 
    $('.selected').parent().prevAll('tr').children('td.this-is-a-label')[0];

來源

2010-05-05 23:24:14

這裏是你如何得到這兩個<tr>和<td> DOM元素的引用：

$("tr:has(td.selected)").each(function(i, trSel){ 
    var trLabel = $(trSel).prevAll("tr:has(td.this-is-a-label)").get(0); 

    var tdSel = $(trSel).children("td.selected").get(0); 
    var tdLabel = $(trLabel).children("td.this-is-a-label").get(0); 

    console.log(trSel, tdSel); 
    console.log(trLabel, tdLabel); 
});

來源

2010-05-05 23:56:52

我創建了一個小插件，響應這一職位尋找的目的一個相對於當前單元格的單元格：

$.fn.cellFromCell = function(r,c,upOrDown) { 
    if(upOrDown == 'down') { 
     return $(this).parent().prevAll(':eq(' + r + ')').find('td:eq(' + c + ')').text(); 
    } else { 
     return $(this).parent().nextAll(':eq(' + r + ')').find('td:eq(' + c + ')').text(); 
    } 
} 

alert($('.selected').cellFromCell(1, 0, 'down')); // alerts "Label Cell" 
alert($('.this-is-a-label').cellFromCell(0, 0)); // alerts "Detail 1"

我用過你r一個簡單的測試用例。你可以亂用在這裏：http://jsfiddle.net/6kfVL/3/

來源

2010-05-06 00:25:30 karim79

$("td.selected").parents("table").find("td.this-is-a-label").text();

來源

2010-05-06 03:47:49 Aneesh

你可以很容易通過生成表時，在HTML5 ID標籤編碼：

<table id="myTable"> 
    <tr id="label1"><td class="this-is-a-label">Label Cell</td></tr> 
    <tr data-parent-label-id="label1"><td>Detail 1</td></tr> 
    <tr data-parent-label-id="label1"><td class="selected">Detail 2</td> </tr> 
</table>

然後可以使用的價值，甚至在相關的「父」執行操作：

$("#myTable").on("click", "tr", function() { 
    var associatedLabelId = $(this).data("parent-label-id"); 
    alert("Parent label of the row clicked: " + associatedLabelId); 
    $("#" + associatedLabelId).addClass("highlight"); 
}

來源

2017-08-08 13:23:08 SharpC

jQuery的發現，有一類特殊的細胞上表行

回答

相關問題