從多個克隆divs獲取特定h3

我試圖從按克隆div的特定h3按按鈕。由於我得到了10個具有完全相同值的克隆div，我希望能夠從我剛按下的特定按鈕獲取h3。從多個克隆divs獲取特定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>

來源

2017-02-28 Amar

我認爲，要改變'VAR favoriteMovieTest = $（「本」）父（）找到（「H3」）;'到'VAR favoriteMovieTest = $（本）.parent（）。find（「h3」）;'你的代碼正在尋找一個不存在的html元素。 – Schleis

謝謝，會編輯這個。但仍然不能解決我的問題。另外爲什麼人們downvoting ... – Amar

試試這個。

注意：保持代碼，因爲如果之前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>

來源

2017-02-28 18:09:14 vatz88

嗯，這似乎並沒有在我的代碼工作，也不會這隻得到第一個元素[0]？ – Amar

不可以。您的代碼具有所有相同的元素，因此您認爲它每次都獲得相同的元素。讓我做一些修改來向你展示一些區別。 – vatz88

您的示例代碼只有一個h3。 jquery將返回一個數組並定位你想要使用的元素[0]，它給你h3。你可以試試'debugger'並測試'$（this）'返回給你，並在控制檯中使用它來解決問題。 – Rikin

你可以這樣說：

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代碼來改變顏色，就像我一樣。

來源

2017-02-28 18:18:44 Black

你可以爬上和下去的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>

來源

2017-02-28 18:29:32

從多個克隆divs獲取特定h3

回答

相關問題