2

以下のように、Webページにhtml構造があります。

<div class="group_name">Group A</div>
<div class="student_name">Studen 1</div>
<div class="student_name">Studen 2</div>
<div class="student_name">Studen 3</div>

<div class="group_name">Group B</div>
<div class="student_name">Studen 1</div>
<div class="student_name">Studen 2</div>
<div class="student_name">Studen 3</div>

..
.
.

現在、この構造は PHP を使用して動的に生成されています。私がやりたいことは、「グループA」の最後の要素として以下のコードを追加したいということです:

<div class="student_name">Studen 4</div>

しかし、この "Student 4" レコードを Ajax 応答文字列として取得しているため、jQuery を使用して追加したいと考えています。したがって、グループ名に基づいて div が追加されます。現時点では、グループ名に静的な値を「グループ A」として使用しています。したがって、Javascript は次のようになります。

$(".group_name").each(function(index){
    var group_name = $(this).text();

    if(group_name=='Group A'){
          // Add Student 4 to last position of this group
    }
});

このようにして、すでに「グループ A」要素を選択しています。しかし今、そのグループの最後のエントリとして「Student 4」を追加したいと思います (「Student 3」の下)。これどうやってするの ？

前もって感謝します。

4

1 に答える 1

5 
$('.group_name').filter(function() {
    return $(this).text() == 'Group A';
}).nextUntil('.group_name').filter('.student_name').last().after('<div class="student_name">Student X</div>');

このコードの機能:

  • $('.group_name')すべてのグループを選択
  • .filter(...)正しいグループ名を持つ要素に減らします。:contains()完全一致ではなく部分文字列一致を実行するため、使用しませんでした。
  • .nextUntil('.group_name')新しいグループではない次のすべての兄弟を取ります
  • .filter('.student_name')学生要素ではないすべての要素を削除します-DOM構造がこれを必要とするほど悪い場合に備えて
  • .last()それを最後のものに減らします-新しいものを挿入する必要がある場所
  • .after(...)その要素の後に新しいエントリを挿入します。

ここにデモがあります：http://jsfiddle.net/ThiefMaster/5UHgC/

次のように構造を変更することで、これをより簡単に、よりクリーンに、より構造化できることに注意してください。

<div class="group" id="group-1">
    <div class="group_name">...</div>
    <div class="students">
        <div class="student_name"></div>
        <div class="student_name"></div>
        <div class="student_name"></div>
    </div>
</div>

<div class="group" id="group-2">
    <div class="group_name">...</div>
    <div class="students">
        <div class="student_name"></div>
        <div class="student_name"></div>
        <div class="student_name"></div>
    </div>
</div>

次に、これを簡単に使用できます。

$('#group-X .students').append('<div class="student_name"></div>');
于 2012-05-04T06:15:03.300 に答える