Question

我怎么能用jquery的属性值中的值来安排下面的div？感谢。

<a href="#" id="id1" class="lTest" amount="12">
    <div>abcd1</div>
<a/>

<a href="#" id="id2" class="lTest" amount="64">
    <div>abcd2</div>
<a/>

<a href="#" id="id3" class="lTest" amount="32">
    <div>abcd3</div>
<a/>

<a href="#" id="id4" class="lTest" amount="8">
    <div>abcd4</div>
<a/>

Answer 1

这个应该有效。

<!doctype html>
<html>
    <head>
        <script src='jquery.js'></script>
        <script>
            $(document).ready(init);

            function init() {
                var parent = $('#someid');
                var children = $('a', parent);
                children.sort(function(a, b) {
                   return parseInt($(a).attr('amount')) - parseInt($(b).attr('amount'));
                })
                $.each(children, function(i, child) {
                    parent.append(child);
                });
            }
        </script>
    </head>
    <body>
        <div id="someid">
            <a href="#" class="lTest" amount="12"><div>abcd2</div></a>
            <a href="#" class="lTest" amount="64"><div>abcd4</div></a>
            <a href="#" class="lTest" amount="32"><div>abcd3</div></a>
            <a href="#" class="lTest" amount="8"><div>abcd1</div></a>
        </div>
    </body>
</html>

[编辑]替换为SSCCE以证明其有效。我已经将abcdx中的x更改为预期的排序。你应该按顺序结束abcd1，abcd2，abcd3和abcd4。

Answer 2

试试这个：

var links = $('a.lTest').sort( function(a,b) { return $(a).attr('amount') - $(b).attr('amount'); } );

for ( var i = 1; i < links.length; i++ ) {
    links.eq(i-1).insertBefore( links.eq(i) );
}

Answer 3

首先，假设标签被div（id =“testDiv”）

包围

抱歉，我最初的做法是错误的......

不要这样做：破坏!!! （见下面的编辑）

var testDiv = $（'＃testDiv'）; var children = testDiv.children（'。lTest'）; children.each（function（）{$（this）.remove（）;}）; var testArray = $ .makeArray（children）; testArray.sort（功能（A，B）{ return parseInt（$（a）.attr（'amount'）） - parseInt（$（b）.attr（'amount'）; }）;

children.each（function（）{testDiv.append（this）;}）;

编辑：这是工作版本：

var testDiv = $('#testDiv');
var children = testDiv.children('.lTest').remove();

children = children.sort(function(a,b){
  return parseInt($(a).attr('amount')) - parseInt($(b).attr('amount'));
});

testDiv.append(children);

Answer 4

您对Tinister的回答的第一个评论表明您的测试页面对JQuery一无所知。确保在测试中正确包含JQuery并正确构造HTML。然后你可能会发现其中一个答案有效。

约翰

在JQuery中按编号排序元素

4 个答案: