0

私は現在のコードを持っています：

<div class="submenu" id="submenu0">
    <ul class="root" id="root0">
        <li class="line_element line0"><a><img src="images/lifevl13.jpg" style="padding-left: 5px; width:20px; height:20px;" />Video</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl12.jpg" style="padding-left: 5px; width:20px; height:20px;" />Ebook</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl3.jpg" style="padding-left: 5px; width:20px; height:20px;" />Music/Audio</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl2.jpg" style="padding-left: 5px; width:20px; height:20px;" />Email</a></li>
        <li class="line_element line0" id="line_element0"><a><img src="images/lifevl4.jpg" style="padding-left: 5px; width:20px; height:20px;" />Mail</a></li>
    </ul>
</div>

上記を動的に複製し、動的に作成されるページの別の部分に配置します。私が欲しいのは、新しい要素が追加されたときにline0部分をline1、line2などに変更して、それらを追跡できるようにすることです。

私の追加ボタンイベントハンドラーは通常このアクションを実行しますが、何らかの理由で、個々の「li」要素で機能させることができないようです。jqueryを投稿しますが、コードがたくさんあるので、リクエストしない限り、ここでは提供しません。

編集:(これがjqueryの一部です）

    var numOfParts = ($('.gig_parts').length);
    $('.root.line_element:last').attr('id', 'line_element'+numOfParts);

'numOfParts'変数は、動的に作成された'フィールドセット'を追跡し、IDの末尾に追加します。これは適切な方法ではないことを理解していますが、私を信じてください。今、おそらく後の再設計で。私はまだこれらすべてにかなり慣れていません。

4

2 に答える 2

1

同様の状況に対する私のアプローチは、歴史的にclone、（1）jQueryを使用するか、（2）ドキュメントフラグメントを使用して、毎回要素を回避して最初から作成することでした。そうすれば、より少ない手間idでとを制御できます。class

jQueryのドキュメントにあるように：

注：.clone（）を使用すると、一意であると想定される重複したid属性を持つ要素が生成されるという副作用があります。可能な場合は、この属性を使用して要素を複製したり、代わりにクラス属性を識別子として使用したりしないことをお勧めします。

とは言うものの、さらなる解説については、この投稿をご覧になることをお勧めします。これとこれも興味深いかもしれません。

さらなる考え：

インクリメンタルclassとid数値に関して、重要な問題はそれらが提供する目的です。各要素に一意のものを与えることを避けid、別の方法で効果的に処理できる場合は、それが望ましいです。それぞれについても同じことが言えますclass。JavascriptとjQueryを使用するとthis要素を処理できるため、一意の識別子はまったく必要ない場合があります。

私の場合、データベースからAJAXによって何千もの要素を構築し、それぞれidにデータベースインデックスに対応する一意の要素があります。これは、HTML要素とMySQLレコード間のリンクを維持するために必要ですが、状況によってはそうではない場合があります。それは確かに毎回1からインデックスを作成することと同じではありません。

要約すると、一意classのid識別子が何を達成しているかを確認する必要があります:)

于 2013-01-09T12:28:21.240 に答える
0

私はあなたがあなたの答えを持っていることを知っていますが、誰かが重複/挿入されたIDなどを使用したくない場合に備えて、あなたの例を使用して、彼らが持っているものを複製したい場合に備えて、この代替手段を提供します。現在の行のID/インデックス番号を格納するためにを使用し.data()ます（現在のインデックスも見つけることができるため、特に必要ありません）。

デモを行うために、マークアップを次のように少し変更しました。

<div class="submenu" id="submenu0">
  <ul class="root" id="root0">
    <li class="line_element"><a><img src="images/lifevl13.jpg" />Video</a></li>
    <li class="line_element"><a><img src="images/lifevl12.jpg" />Ebook</a></li>
    <li class="line_element"><a><img src="images/lifevl3.jpg" />Music/Audio</a></li>
    <li class="line_element"><a><img src="images/lifevl2.jpg" />Email</a></li>
    <li class="line_element"><a><img src="images/lifevl4.jpg" />Mail</a></li>
  </ul>
</div>
<div id="rowCount"></div>
<button id="rowAdd">Add New Row</button>

次に、この非常に冗長なコードを使用して、最後の行のクローンを作成して更新する方法を示します。このコードをリファクタリングして、密度を高めたり、冗長性を減らしたりすることもできますが、各ステップを具体的に示すために、そのままにしておきました。

//just show current row count
var numOfParts = $('#root0>.line_element').length + " rows";
$('#rowCount').text(numOfParts);
// show current rows numbers in a span and give
// them a "myid" data value with that value
//this is very verbose to show detail
$('#root0>.line_element').each(function () {
  var row = $(this);
  row.data('myid', row.index());
  row.append('<span class="rownumber">' + row.data("myid") + '</span>');
});

// add a new row
$('#rowAdd').click(function () {
  // add a row
  $('#root0>.line_element:last').clone().appendTo('#root0');

  // update the row count display
  var numOfParts = $('#root0>.line_element').length;
  $('#rowCount').text(numOfParts + " rows");

  // update the added row myid
  var rowAdded = $('#root0>.line_element:last');
  rowAdded.data('myid', rowAdded.index());

  // show what we are doing
  // then update the current added row displayed number using its data myid
  alert('updating: ' + $('#root0>.line_element:last>.rownumber').text() + " to " + rowAdded.data("myid"));
  $('#root0>.line_element:last>.rownumber').text(rowAdded.data("myid"));
});

これが実際の例です：http：//jsfiddle.net/RCTYZ/

于 2013-01-09T13:18:16.103 に答える