Question

当我点击DIV时，我有div元素，我添加了这个DIV的“选定”类。具有“选定”类的DIV转到.each（）。我可以按最后添加的方式对这些元素进行排序吗？

例如，如果我选择341我想要获得341 这是我的代码

<!DOCTYPE html>
<html>
    <head>
        <style>.active{display: inline;margin:0 10px;border:1px solid #000;cursor: pointer;}</style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
        <div id="content"> 
            <div class="row">
                <div class="nred"></div><div class="active">1</div><div class="active">2</div><div class="active">3</div><div class="active">4</div><div class="active">5</div><div  class="active">6</div><div class="active">7</div><div class="active">8</div>
            </div>
            <div id="bileti"></div>
        </div>
<script>
    $(".row").hover(
        function () {
            $(this).children("div.active").toggleClass('bounce');
            $(this).children("div.nred").toggleClass('izbranred');
        }
    );

    $("div.active").click(function () {
        $(this).toggleClass('selected');
        document.getElementById("bileti").innerHTML="";

        $(".selected").each(function(){
            var place=$(this).html();
            document.getElementById("bileti").innerHTML+=place;
        });
    });
</script>

    </body>
</html>

Answer 1

试试这个：

var place = '';
$(".selected").each(function(){
    place += this.innerHTML;
});
document.getElementById("bileti").innerHTML = place;

但是你的每个方法根据它们在DOM中的位置选择元素，因此结果总是按134排序，如果没有selected类，你可以追加span元素并删除它们。

$("div.active").click(function() {
    $(this).toggleClass('selected');
    if ($(this).hasClass('selected')) {
        $("#bileti").append('<span>' + this.innerHTML + '</span>');
    } else {
        $("#bileti span:contains(" + this.innerHTML + ")").remove();
    }
});

http://jsfiddle.net/MW2wH/

Answer 2

不是使用$(".selected").each（每次按类顺序重新选择，而是按照DOM顺序重新选择元素），而是跟踪数组中选定的div：

(function(){

    var selected = [];

    $("div.active").click(function(){
        var i = $.inArray(this, selected);

        if(i >= 0){
            // Already in array, so remove it
            $(this).removeClass('selected');
            selected.splice(i, 1);
        }else{
            // Not in array, so add it
            $(this).addClass('selected');
            selected.push(this);
        }

        document.getElementById("bileti").innerHTML = "";

        // Iterate through the array

        $(selected).each(function(){
             var place = $(this).html();
             document.getElementById("bileti").innerHTML += place;
        });
    });

})();

请注意，您还可以优化以下内容：

$(selected).each(function(){
     var place = $(this).html();
     document.getElementById("bileti").innerHTML += place;
});

如果有很多元素要循环，那么代码很慢，因为它通过附加到innerHTML来不断更新DOM。只需构建一个HTML字符串，然后在循环之后将它放在DOM中就会快得多：

var places = "";
$(selected).each(function(){
     places += $(this).html();
});
document.getElementById("bileti").innerHTML = places;

然后您也可以删除该行：

document.getElementById("bileti").innerHTML = "";

如果您完成所有这些更改，则整个脚本将变为：

$(".row").hover(
    function(){
        $(this).children("div.active").toggleClass('bounce');
        $(this).children("div.nred").toggleClass('izbranred');
    }
);

(function(){

    var selected = [];

    $("div.active").click(function(){
        var i = $.inArray(this, selected);

        if(i >= 0){
            // Already in array, so remove it
            $(this).removeClass('selected');
            selected.splice(i, 1);
        }else{
            // Not in array, so add it
            $(this).addClass('selected');
            selected.push(this);
        }

        var places = "";
        $(selected).each(function(){
             places += $(this).html();
        });
        document.getElementById("bileti").innerHTML = places;

    });

})();

JSFiddle Demo

jquery sort dom元素

2 个答案: