Question

如果可能的话，我想帮助使用以下jQuery代码......

 $(document).ready(function() {
  $('table.sortable').each(function() {
   var $table = $(this);
    $('th', $table).each(function(column) { // #A
     var $header = $(this); 
      $header.click(function() {
       var rows = $table.find('tbody > tr').get();
        rows.sort(function(a, b) { // #B
         var keyA = $(a).children('td').eq(column).text().toUpperCase(); //#C
         var keyB = $(b).children('td').eq(column).text().toUpperCase();
          if(keyA < keyB) return -1;
          if(keyA > keyB) return 1;
          return 0;
          });
          $.each(rows, function(index, row) { //#D
           $table.children('tbody').append(row);
          });
        });
     });
   });
 });

对于我添加的评论（#A到#D），有人可以向我解释一下：

#A - 什么表示此功能的结束/结束...即功能在哪里结束？我天真地寻找一个闭合的大括号，否则从阅读代码我假设整个代码是为遇到的每个'th'元素运行，这似乎不是很有效？最后一个“}）;”是否意味着这个功能的结束？

#B - 我会喜欢来了解这个比较器功能的工作原理。我的书非常简短地介绍了它，我在网上找不到任何其他资源！什么值将通过参数'a'和'b'传递给函数？请有人煞费苦心地解释这整个功能吗？！：）

#C - .eq（列）部分如何工作？我假设如果'column'包含循环当前打开的迭代，那么值将始终是最终的迭代值？或者这个比较器函数是通过.each循环每次迭代运行的吗？

#D - 此函数可能会遍历已排序数组行的每一行，并将其附加到表体。这两个参数（索引，行）是否总是包含在$ .each回调函数中？

任何帮助感激不尽！我已经有了#B的答案，如果您可以通过回答其中一个查询来提供帮助，我将通过赞成票表达我的感谢！提前谢谢。

Answer 1

回答#B： rows.sort（）接受一个带有两个参数的函数（在本例中为a和b），并返回一个值以指示两者之间的关系是什么。简而言之，它是一个比较器，它将告诉排序算法a是在b之前还是之后。在此调用中，a和b将是表的两行，并且在将其转换为大写后将使用相关单元格（由列指示）的文本。

Answer 2

我已经标记了代码，表示您询问的每个功能的结束。（见帖子末尾的代码）。

#A：看起来代码是针对大小而不是速度进行了优化的。函数通常不应在其他函数内创建。另外，$ table.find（'th'）可能比$（'th'，$ table）更快，还有一些其他可以执行的小优化。

mfx回答#B

#C：“column”这里涉及nodeList / array（jQuery对象）中的位置。所以，是的，这是迭代jQuery的“每个”循环开启。 jQuery的“each”函数使用javascript的本地“call”函数，有点像这样（简化）：

function each(jQueryObject, callback){
    for(var index in jQueryObject){
        singleEach(jQueryObject[index], index, callback);
    }
}
function singleEach(singleObject, currentIndex, callback){
    // singleObject = "this" & currentIndex = "column" in your case
    // function.call(object, argument1, argument2, argument3..., argument_n)
    callback.call(singleObject, currentIndex, singleObject);
}
each(["one","two","three"], function(i, myObject){
    // alerts the current index and the current indexes value.
    // myObject === this.
    alert(i + "= " + this);
});

因此每次each（）执行一次迭代（singleEach）时，当前索引作为参数传递给在其自己的范围内调用的回调函数。
迭代仅在单击标题列时运行，而不是在每个循环的每次迭代时运行。

#D他们肯定是！如果查看函数singleEach，可以看到它将两个参数传递给回调函数。第一个是索引，另一个是对象本身（这个）。

    $table.children('tbody').append(row);

可以写成：

    $table.children('tbody').append(this);

您应该自己查看jQuery代码和jQuery文档。

$(document).ready(function() {
    $('table.sortable').each(function() {
        var $table = $(this);
        $('th', $table).each(function(column) { // #A
            var $header = $(this); 
            $header.click(function() {
                var rows = $table.find('tbody > tr').get();
                rows.sort(function(a, b) { // #B
                    var keyA = $(a).children('td').eq(column).text().toUpperCase(); //#C
                    var keyB = $(b).children('td').eq(column).text().toUpperCase();
                    if(keyA < keyB) return -1;
                    if(keyA > keyB) return 1;
                    return 0;
                }); // end of B
                $.each(rows, function(index, row) { // #D
                    $table.children('tbody').append(row);
                }); // end of D
            });
        }); // end of A
    });
});

jQuery表排序功能的说明

2 个答案: