3

当我点击 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>
4

2 回答 2

2

试试这个：

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

但是，您的 each 方法会根据元素在 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/

于 2012-10-05T22:22:59.720 回答
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 演示

于 2012-10-05T22:28:17.527 回答