2

前提：

ドキュメントからhtmlのチャンクを取り出してから、div idを変更し、同じドキュメント内の元のhtmlの下に、いくつかの変更を加えて同じhtmlチャンクを再印刷したいと思います。この「X」回を繰り返します。

問題：

再印刷しようとすると、htmlチャンクのdivにアクセスできないようです。

私のステップ

  • ページにいくつかのhtmlがあり、divで囲まれています。

    <div id="a">
   <div id="aaa">...</div>
   <div id="bbb">...</div>
   <div id="ccc">...</div>
</div>

jQueryを使用してこのhtmlを抽出します

var h = $("#a").html();

jQueryオブジェクトに変換します

var jqObj = $(h);

そして、その中のdivを調べます

$("div", jqObj).each(function (idx, elem) {
       //elem is a HTMLDivElement type
        var jq = $(this);
       // I want to access the id, class etc. of the div elements here            
    });

'each'は、divの数だけ正しく反復します。

しかし、$（this）.attr（ "id"）やelem.idなど、私が何をしても、すべて未定義として返されます。$（this）.html（）を印刷しましたが、コンテンツが含まれているようですが、divからのIDがすべて削除されているようです。

私は何が間違っているのですか？ID（HTMLを再度出力する前に変更する必要があります）およびこのHtmlDivElementの他のプロパティを取得するにはどうすればよいですか？

問題が解決しました

clone（）の使用に関する以下のコメントを参照してください。他の誰かがそれを必要とする場合に備えて、これが私の関数です。

function Inserts() {
    //get the html    
    var h = $("#a").clone();

    //now turn it into a jquery object
    var jqObj = $(h);

    //now parse it, let's make some modifications
    var someID = "0";
    $("div", jqObj).each(function (idx, elem) {

        if ($(this).attr("id") == undefined)
            return;

        $(this).attr("id", someID + "_" + $(this).attr("id"));
    });

    $("#target_div").append(jqObj.html());

}

4

2 に答える 2

2

HTMLを取得して新しい要素を作成する代わりに、cloneを使用してください。クローン作成後、必要な場所にブロックを再挿入する前に、プロパティを変更できます。

再挿入する前に、オブジェクトのIDを変更することはほぼ必須であることに注意してください。それを行うために使用attr("id","anotherId")します。

于 2012-06-19T17:04:38.393 に答える
1

clone()行く方法であり、そのシンプルでそのようなタスクのために構築されています。

ところで、あなたのアプローチの問題は、

あなたがやっていました、

var h = $("#a").html();
var jqObj = $(h);

つまり、あなたはこれを試していました、

var jqObj = $('<div id="aaa">...</div><div id="bbb">...</div><div id="ccc">...</div>')

ただし、関数に渡されるマークアップ文字列に$はルート要素がなく、$関数はマークアップ文字列（タグ付きの文字列）をjQueryオブジェクトに変換するためにルート要素を必要とします。

したがって、アプローチに解決策が必要な場合は、次のようなことを行うことができます。

$(function(){
    var h = $("#a").wrap('<div />').parent().html();
    var jqObj = $(h);  
    $("div",jqObj).each(function (idx, elem) {
        //elem is a HTMLDivElement type
        var jq = $(this);
        console.log(jq.attr('id')); 
        // I want to access the id, class etc. of the div elements here            
    });
});
于 2012-06-19T17:36:20.407 に答える