4

私は次のhtmlを持っています

<div class="someClass">  
    Some text  
</div>  
<div class="someClass">  
    Some other text  
</div>
<div class="add>
    <img src="someImage.jpg">
</div>

ここで、画像の追加をクリックした後に別のdivを追加したいと思いますが、クラス「someClass」の最後のdivの後にのみ追加します。

次のjQueryを使用すると、各someClass要素の後に追加されるため、複数回追加されます。

$(".add img").live("click", function() {
    $(".containerFooter").after("<div class='someClass'>test</div>");
});

someClass属性を持つ最後のdivの後にのみ追加する方法はありますか？

4

6 に答える 6

6

:lastあなたはセレクターを探しています：

$(".someClass:last").after("<div class='someClass'>test</div>");
于 2012-06-22T20:19:08.673 に答える
2 
$('.someClass').last()

また

$('.someClass:last')

クラスの最後の要素を提供しますsomeclass

于 2012-06-22T20:19:26.137 に答える
1

使用する：

$(".someClass").last().append("<div class='someClass'>test</div>");
于 2012-06-22T20:19:47.073 に答える
1

申し訳ありませんが、最初の試みで質問を完全に読み、ansを更新しました！

また、あなたのhtmlにはタイプミスがあります、それはそれを作ります

作業デモ 

$(".someClass").last() //-> selects your last div with id = someClass

.after("<div class='someClass'>test</div>");//-> place the html after the selected div

以下の実際のコード

   $(".add").live("click", function(){
  $(".someClass").last().after("<div class='someClass'>test</div>");
});
​
    ​
于 2012-06-22T20:22:00.450 に答える
1 
$(".add img").live("click", function() {
    $(".someClass:last").after("<div class='someClass'>test</div>");
});
于 2012-06-22T20:25:00.753 に答える
0

より簡単な方法があるかもしれませんが、jqueryクラスは適用可能なオブジェクトの配列を返します。したがって、最後のそのようなオブジェクトを見つけて、そこから新しいjqueryオブジェクトを作成し、それを操作することができます。

<html><title>JQuery Play</title>
<h1>JQuery Play</h1>
<script src="jquery-1.4.1.js" type="text/javascript" ></script>
<script type="text/javascript">
function add()
{
var x=$(".someClass");
$(x[x.length-1]).after("Added text");
}
</script>
<div class="someClass">   
    Some text   
</div>   
<div class="someClass">   
    Some other text   
</div> 
<div class="add"> 
    <button onclick="add()">Add</button>
</div> 

</html>
于 2012-06-22T20:25:28.697 に答える