【问题标题】:jquery sort a list according to div element statusjquery根据div元素状态对列表进行排序
【发布时间】:2011-07-26 00:02:57
【问题描述】:

我有一个列表,每行包含一个 div。每个 div 的元素之一是标签。标签包含位于地图中(也在阴影区域中)的标记的输入/输出信息。我希望根据标签输入/输出状态对它们进行排序。到目前为止,我所做的是拥有下面的代码。 用户可以更改阴影区域的比例,从而改变标记的状态。因此,列表应根据标记在地图上的状态进行更新。所有标记 IN 应位于列表顶部,输出应放在“IN”之后。

**我有 30 行的方法。我想用这个方法。

A 是我的测试循环代码,以确保我的输入/输出标签 html 属性正确。 B 是目前不工作的代码。任何熟悉的人都可以看看代码中缺少什么。

提前致谢。

HTML 代码

<div id="divsec_13A North Buderim Bvd Buderim" name="13A North Buderim Bvd Buderim">
    <input type="checkbox" name="checkbox_13A  North Buderim Bvd Buderim" id="4" value="13A North Buderim Bvd Buderim">
    <a onclick="$.fn.centerMarker('13A  North Buderim Bvd Buderim');">13A  North Buderim Bvd Buderim</a>
    <label type="label" name="inOut_13A  North Buderim Bvd BuderimLabel" id="inOut_13A  North Buderim Bvd BuderimLabel" class="inOutControl">In</label>
</div>

PS:列表是这样的。

复选框 |地址1 |在

复选框 |地址2 |出去

复选框 |地址3 |在

复选框 |地址4 |出去

一)

$(this.children()).each(function (ind){                 

      var html = $(this).children().filter(".inOutControl").html();
      alert(html);  
}); 

B)

   $("#list").sort(sortTest);

        var sortTest = function(a,b){   
            //return $(a).find(".inOutControl").html() > $(b).find(".inOutControl").html() ? 1 : -1;        
            return $(this, a).filter(".inOutControl").html() != $(this, b).filter(".inOutControl").html() ? 1 : -1;  
        };

PS:类似于this,但不知道为什么不起作用。

【问题讨论】:

    标签: jquery list sorting


    【解决方案1】:

    这行得通..以防万一有人需要...

    $("#list").sortList();
    
    $.fn.sortList = function(){
            var $list = $(this);
            var listItems = $list.children().get(); 
            listItems.sort( function(a,b){
                return $( a).find(".inOutControl").html() > $( b).find(".inOutControl").html() ? 1 : -1;  
            });
            $.each(listItems, function(idx, itm){$list.append(itm);});
            return this;
        };
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-12
      • 1970-01-01
      相关资源
      最近更新 更多