0

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

这是工作小提琴：http: //jsfiddle.net/gTAfe/1/

我的代码看起来像这样：

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() 函数，此脚本确实追加，但它不会按照 DOM 中的 div 类的相同顺序追加 div。var eltofind = ["heading", "text", "image"];目前它们按定义的顺序附加。

我如何记住当前要查找的 div 类的顺序并在每个函数中以相同的顺序附加它们？

任何帮助将不胜感激。

4

2 回答 2

1

这里有两个选择：

1）最简单的只是克隆它们并附加它们。不过，这取决于您希望对每个元素进行多少控制：DEMO

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

于 2012-06-29T17:36:01.583 回答
0

问题是您首先找到所有headings，然后是所有texts，然后是所有images。这样就改变了顺序。你需要的是一个多选器。见：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);
});​
于 2012-06-29T17:20:46.517 回答