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);

        });
    }
}

このスクリプトは追加しますが、各（）関数のためにdivクラスがDOMにあるのと同じ順序でdivを追加しません。var eltofind = ["heading", "text", "image"];現在、それらは定義された順序で追加されています。

各関数内で同じ順序で検索して追加したいdivクラスの現在の順序をどのように覚えていますか？

どんな助けでも大歓迎です。

4

2 に答える 2

1

次の 2 つのオプションがあります。

1）最も簡単なのは、それらを複製して追加することです。ただし、各要素をどの程度制御したいかによって異なります。DEMO

2) これにより、個々の要素をコードでより詳細に制御できます。各要素または何かに変更を加えたい場合: DEMO

于 2012-06-29T17:36:01.583 に答える
0

問題は、最初にすべてを検索し、次にすべてを検索しheading、次にすべてtextを検索することですimage。順序が変わります。必要なのはマルチセレクターです。参照：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 に答える