javascript - 从多个克隆的 div 中获取特定的 h3

Question

我试图在按下按钮时从克隆的 div 中获取特定的 h3。因为我得到了 10 个具有完全相同值的克隆 div，所以我希望能够从我刚刚按下的特定按钮中获取 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 (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>

如您所见，我从按钮中获取了特定的 h3 元素。 现在您可以随心所欲地使用它，例如操纵它的 CSS 代码来更改颜色，就像我所做的那样。