jquery變量：選擇順序不更新

根據學習jQuery，通過使用變量來保存常用選擇被認爲是最佳實踐，因爲它可以節省時間和資源，並通過重複來避免錯誤。當有很多元素，並且你在jQuery中做了很多事情時，這是一件好事。但是，這些變量的排序並沒有得到更新，這減少了它們的用處。jquery變量：選擇順序不更新

考慮下面的簡單例子。

<html lang="en"> 
<head> 
<title>test</title> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    $(document).ready(function(){ 

    var $elements = $('tbody tr'); 

    function dump_colours($selection){ 
    $selection.each(function(){ 
    console.log($(this).index(), $(this).find('td').eq(1).text()); 
    }); 
    } 

    // Re-arrange the table. Maybe during a sort. 
    var $green = $elements.eq(1); 
    $('tbody tr').eq(1).remove(); 
    $('tbody').append($green); 

    dump_colours($elements); 

    // $elements did get updated to some extent, but the ordering isn't right: 
    console.log($elements.eq(1).text()); // Output: 1green10 
    // Why isn't the ordering updated? $elements.eq(1) should be blue now. 

    // It re-orders if we re-declare the variable. 
    var $sorted_elements = $('tbody tr'); 
    console.log($sorted_elements.eq(1).text()); // Output: 1blue10 
    // eq(1) now correctly selects the blue row. 

    }); 
</script> 
</head> 
<body> 

<div> 
    <table> 
<thead> 
    <tr> 
    <th>type</th> 
    <th>colour</th> 
    <th>cost</th> 
    </tr> 
</thead> 
<tbody> 
    <tr><td>1</td><td>red</td><td>10</td></tr> 
    <tr class="foo"><td>1</td><td>green</td><td>10</td></tr> 
    <tr><td>1</td><td>blue</td><td>10</td></tr> 
    <tr class="foo"><td>1</td><td>yellow</td><td>10</td></tr> 
    <tr><td>1</td><td>orange</td><td>10</td></tr> 
    <tr><td>1</td><td>black</td><td>10</td></tr> 
    <tr class="foo"><td>1</td><td>white</td><td>10</td></tr> 
    <tr><td>1</td><td>purple</td><td>10</td></tr> 
    <tr><td>3</td><td>brown</td><td>30</td></tr> 
    <tr><td>2</td><td>pink</td><td>20</td></tr> 
</tbody> 
    </table> 
</div> 

</body> 
</html>

這裏，選擇$元件被更新，以在一定程度上，這是因爲執行console.log（）輸出表示綠色行，從而具有更新的索引表被重新排列之後。它從索引= 1到索引= 9。但是，jQuery的排序（缺少更好的術語）沒有更新。方法.eq（）選擇錯誤的行。

有沒有一種很好的方式來協調這個使用最佳實踐的精神，即。比在每次排序操作之後不斷重新設置jquery變量更好？我已經絆倒了幾次，因爲沒有一直使用相同的選擇器。這是使用變量存儲常見事物的最大優點之一，以避免不必要的重複和由此產生的錯誤。

編輯：部分解決方案。

似乎有沒有理想的解決方案，當需要jQuery。

Scimonster發佈的方式，至少可以防止錯誤發生，但我發現了一個更簡單的解決方案僅通過存儲選擇字符串本身：

var tr_selector = "div#table1 tbody > tr.discounted"; 

$(tr_selector).each(function(){ 
    ... 
}); 
$(tr_selector).hide();

來源

2014-11-22 shley

不幸的是，沒有任何辦法。我之前在jQuery的論壇上使用asked about this，並被告知'不'。

jakecigar有得到半的解決方案，但它只是抽象了呼叫：

$.liveList = function(selector) { 
     return function(){ return $(selector) } 
} 
var TRs =$.liveList('tr'); 
TRs().css('color','green')

如果你不嫁給了jQuery，你可能也想看看使用普通的DOM函數返回live NodeList，這是你真正想要的東西。

來源

2014-11-22 19:38:05 Scimonster

jquery變量：選擇順序不更新

回答

相關問題