Question

我不确定这是否可行。我似乎无法开始，但我有以下HTML。是否可以单击标题（第1列，第2列或第3列）并使bodyModule中的所有内容都排序？

<div class="moduleRowTitle">
    <div class="column1">Column 1</div>
    <div class="column2">Column 2</div>
    <div class="column3">Column 3</div>
</div>
<div class="bodyModule">
    <div class="row">
        <div class="column1">AAAAA</div>
        <div class="column2">BBBBB</div>
        <div class="column3">CCCCC</div>
    </div>
    <div class="row">
        <div class="column1">BBBBB</div>
        <div class="column2">AAAAA</div>
        <div class="column3">CCCCC</div>
    </div>
    <div class="row">
        <div class="column1">BBBBB</div>
        <div class="column2">CCCCC</div>
        <div class="column3">AAAAA</div>
    </div>
</div>

单击column2应排序如下：

    <div class="row">
        <div class="column1">BBBBB</div>
        <div class="column2">AAAAA</div>
        <div class="column3">CCCCC</div>
    </div>
    <div class="row">
        <div class="column1">AAAAA</div>
        <div class="column2">BBBBB</div>
        <div class="column3">CCCCC</div>
    </div>
    <div class="row">
        <div class="column1">BBBBB</div>
        <div class="column2">CCCCC</div>
        <div class="column3">AAAAA</div>
    </div>

Answer 1

演示FIDDLE

<强> Jquery的

     $(document).ready(function(){
$('.moduleRowTitle div').click(function(){
     var vals = [];
    var className=$(this).attr('class');
    $( ".bodyModule ."+className).each(function(){
            vals.push($(this).html());
    });
          vals.sort();
    var i=0;
     $( ".bodyModule ."+className).each(function(){
            $(this).html(vals[i]);
            i=i+1;
    });
});
});

我希望这是你所期待的

基于各种列对嵌套元素进行排序

1 个答案: