複数のクローンされたdivから特定のh3を取得

Question

ボタンを押したときにクローンされたdivから特定のh3を取得しようとしています。私は正確に同じ値でクローンされたdivを10個持っているので、私はちょうど押された特定のボタンからh3を得ることができるようにしたい。

$("body").on("click", ".btnFavorite", function() { 
 
    var favoriteMovieTest = $(this).parent().find("h3"); 
 
    alert(favoriteMovieTest); 
 
}); 
 
for (var i = 0; i < 10; i++) { 
 
    $(".search-result:first").clone().appendTo(".search"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="search-result"> 
 
    <h3>Titel(year)</h3> 
 
    <input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite"> 
 
    <input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning"> 
 
    </div> 
 
</div>

Answer 1

これを試してみてください。

注：それはforループの前に実行された場合、forループで作成された要素は、イベントハンドラに添付されませんので、forループ後にイベントハンドラをアタッチするためのコードを保管してください。

for (var i = 0; i < 10; i++) { 
 
    $(".search-result:first").clone().appendTo(".search").find("h3").append(" "+i); 
 
} 
 

 
$(".btnFavorite").on("click", function() { 
 
    var favoriteMovieTest = $(this).siblings("h3")[0]; 
 
    console.log(favoriteMovieTest); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="search-result"> 
 
    <h3>Titel(year)</h3> 
 
    <input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite"> 
 
    <input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning"> 
 
    </div> 
 
</div>

Answer 2

あなたはこのようにそれを行うことができます：あなたが見ることができるように

for (var i = 0; i < 10; i++) { 
 
    $(".search-result:first").clone().appendTo(".search"); 
 
} 
 

 
$(".btnFavorite").on("click", function() { 
 
    var favoriteMovieTest = $(this).closest("div").find("h3"); 
 
    favoriteMovieTest.css('color','red');  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="search-result"> 
 
    <h3>Titel(year)</h3> 
 
    <input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite"> 
 
    <input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning"> 
 
    </div> 
 
</div>

iは、ボタンからその特定のh3の要素を取得します。 これで好きなことをやり遂げることができます。たとえば、私が行ったように、色を変更するにはCSSコードを操作します。

Answer 3

クローンされた要素がクリックされたタイトルとインデックス番号を取得するために、DOMを上下に登ることができます。

$("body").on("click", ".search .btnFavorite", function(e) { 
 
    var elIndex = Array.from(e.target.parentNode.parentNode.children).indexOf(e.target.parentNode); 
 
    var favoriteMovieTest = e.target.parentNode.innerText; 
 

 
    alert('H3: ' + favoriteMovieTest + ' index: ' + elIndex); 
 
}); 
 
for (var i = 0; i < 10; i++) { 
 
    $(".search-result:first").clone().appendTo(".search"); 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="search-result"> 
 
    <h3 id='title'>Title(year)</h3> 
 
    <input type="submit" value="Favoritfilm" class="btn btn-warning btnFavorite"> 
 
    <input id="btnArkiv" type="submit" value="Arkiv" class="btn btn-warning"> 
 
    </div> 
 
</div>