Question

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

这里，选择$元素在某种程度上更新，因为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();

Answer 1

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

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

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

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

jquery变量：选择顺序不更新

1 个答案: