Question

我正在使用JQuery在DOM＆amp;中找到某些div类。如果他们发现将它们附加到另一个div中。

我的代码看起来像这样：

var parentM = $('#module');
var eltofind = ["heading", "text", "image"];

for(var i=0; i < eltofind.length; i++){
     var thisElement = eltofind[i];

    if(parentM.find("." + thisElement).length != 0){

        var eltoget = parentM.find("." + thisElement);

        $(eltoget).each( function(index) {
                var count = (index +1);
                var getting = thisElement + "-" + count;
                $('<div></div>').appendTo('#output').addClass(getting).text(getting);

        });
    }
}

这个脚本会附加但是由于each（）函数，它不会在div中以div相同的顺序附加div。目前，他们按照var eltofind = ["heading", "text", "image"];定义的顺序附加。

我如何记住我想找到的div类的当前顺序＆amp;在每个函数中以相同的顺序附加它们吗？

任何帮助都将受到高度赞赏。

Answer 1

以下是两个选项：

1）最简单的只是克隆它们并附加它们。这取决于您对每个元素的控制程度：DEMO

2）如果你想对每个元素进行更改，这个代码可以让你更好地控制代码：DEMO

Answer 2

问题在于您首先找到所有heading，然后找到所有text s，然后找到所有image s。这样就改变了顺序。你需要的是一个多选择器。请参阅：http://api.jquery.com/multiple-selector/

这将立即找到所有相关元素并保留顺序。

此代码段按预期工作：

var parentM = $('#module');
var eltofind = ["heading", "text", "image"];

var multiSelector = "";
for (var i = 0; i < eltofind.length - 1; i++) {
    multiSelector = multiSelector + "." + eltofind[i] + ", ";
}
multiSelector = multiSelector + "." + eltofind[eltofind.length - 1];

//this will contain all your elements
var eltoget = parentM.find(multiSelector);
$(eltoget).each(function(index) {
    $('<div></div>').appendTo('#output').hide().text($(this).text()).fadeIn(3000);
});

jQuery appendTo按照DOM源顺序连续发送

2 个答案: