3

AJAX Web ページを (IE 8 を使用して) プログラミングしており、返されたデータから jQuery でリストを動的に作成する必要があります。後で、リストを jQuery アコーディオンに変換します。

また、これらの jQuery 関数とチェーンを使用する適切な方法を学ぼうとしています。私はただの jQuery NOOB ですが、JavaScript は理解しています。jQuery dom 関数に関する良い記事を見つけました: http://www.packtpub.com/article/jquery-1.4-dom-insertion-methods

テキストを使用した HTML ソース コードに頼ることなく、jQuery dom 関数と jQuery チェーンを使用して、可能な限り追加したいと考えています。.wrap()主に 、.appendto()、.attr()、.text()、および を使用したい.parent()。

.attr("class", "CC_CLASS")."がクラスを追加する最良の方法だとは思いません。

HTMLコードを考えると：

<div id="outputdiv"></div>

jQuery dom 関数を使用して、次のように変更します。 

<div id="outputdiv"> 
 <ul id="JJ_ID"> 
  <li> AAA_text </li> 
  <li id="BB_ID"> BBB_text </li> 
  <li class="CC_CLASS"> CCC_text </li> 
  <li id="DD_ID">DDD_text<br/> 

    <ol id="EE_ID"> 
      <li> FFF_text </li> 
      <li id="GG_ID"> GGG_text </li> 
      <li class="HH_CLASS"> HHH_text </li> 
    </ol> 

  </li> 
 </ul> 
</div>

私が見つけたいくつかのコード（テキスト内のスペースを無視して）。

var aObj = $('<li></li>').text("AAA_text")
var bObj = $('<li></li>').attr("id", "BB_ID").text("BBB_text"); 
var cObj = $('<li></li>').attr("class", "CC_CLASS").text("CCC_text");
var dObj = $('<li></li>').attr("id", "DD_ID").text("DDD_text");
var fObj = $('<li></li>').text("FFF_text");
var gObj = $('<li></li>').attr("id", "GG_ID").text("GGG_text"); 
var hObj = $('<li></li>').attr("class", "HH_CLASS").text("HHH_text");

どういうわけか (fObj + gObj + hObj) を eObj に追加しますか?

var eObj = `*something*`.attr("id", "EE_ID").wrap(`*something*`);

どういうわけか (aObj + bObj + cObj+ dObj + eObj) を jObj に追加しますか?

var jObj = `*something*`.attr("id", "JJ_ID").wrap(`*something*`);  
jObj.appendTo("#xmlOutputId")
4

1 に答える 1

7

メソッドは、呼び出したのと同じコンテナ オブジェクトを返します。.appendこれを利用して、メソッドを快適に連鎖させます。

var inner_list = $('<ol/>', {id: "EE_ID" })
    .append( $('<li/>', {text: "FFF_text" })
    .append( $('<li/>', {id: "GG_ID", text: "GGG_text" })
    .append( $('<li/>', {"class": "HH_CLASS", text: "HHH_text" });

var outer_list = $('<ul/>', {id: "JJ_ID" })
    .append( $('<li/>', {text: "AAA_text" })
    .append( $('<li/>', {id: "BB_ID", text: "BBB_text" })
    .append( $('<li/>', {"class": "CC_CLASS", text: "CCC_text" })
    .append( 
        $('<li/>', {id: "DD_ID", text: "DDD_text"})
        .append(inner_list)
    );

outer_list.appendTo('#xmlOutputId');

実際には s を使用せずに 1 つのステートメントですべてを実行できますvarが、私の意見では、それは見苦しくなりすぎます。

于 2011-01-18T02:51:53.583 に答える