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循环后附加事件处理程序，因为如果它在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

你可以这样做：

＆＃13;

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');    
});

＆＃13;

<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>

＆＃13;

正如您所看到的，我从按钮中获取了特定的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>

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

3 个答案: