jquery变量：选择顺序不更新答案

【问题标题】：jquery variable: selection order doesn't updatejquery变量：选择顺序不更新
【发布时间】：2015-01-20 18:52:21
【问题描述】：

根据 Learning 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>

这里，选择$elements 有一定程度的更新，因为console.log() 输出显示绿色行表示表格重新排列后有更新的索引。它从 index=1 到 index=9。但是，jquery 排序（因为没有更好的术语）没有更新。 .eq() 方法选择了错误的行。

有没有一种很好的方法可以本着使用最佳实践的精神来协调这一点，即。比在每次排序操作后不断重新设置 jquery 变量更好？由于不始终使用相同的选择器，我已经多次绊倒。这是使用变量存储常见事物的一大优势，可以避免不必要的重复和由此产生的错误。

编辑：部分解决方案。

在需要 jquery 时似乎没有理想的解决方案。

Scimonster 发布了一种至少可以防止错误发生的方法，但我找到了一个更简单的解决方案，只需存储选择器字符串本身即可：

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

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

【问题讨论】：

标签： jquery variables jquery-selectors

【解决方案1】：

不幸的是，没有任何办法。我之前在 jQuery 的论坛上asked about this，被告知“不”。

jakecigar 留下了一个半解决方案，但它只是抽象了调用：

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

如果您没有与 jQuery 结婚，您可能还想看看使用返回 live NodeList 的普通 DOM 函数，这是您真正想要的那种东西。

【讨论】：