[英]How can I retrieve the contents of each div individually using jQuery
我有以下HTML,我一直無法選擇我想要的內容。 我使用的是jQuery,而.children()沒有得到文本節點。
<div id="hiddenMenus">
<div id="planetGranite">
<div class="menuItem">
<div class="productId">1</div>
<div class="productName">Child Admission</div>
</div>
<div class="menuItem">
<div class="productId">2</div>
<div class="productName">Adult Admission</div>
</div>
<div class="menuItem">
<div class="productId">3</div>
<div class="productName">Senior Admission</div>
</div>
<div class="menuItem">
<div class="productId">4</div>
<div class="productName">Student Admission</div>
</div>
<!-- Variable For Loop (Easier than Child-Nodes) -->
<div class="totalMenuItems">4</div>
</div>
</div><!-- End of #hiddenMenus -->
我想循環遍歷'planetGranite'div並逐個選擇每個'productName'類的內容,以便我可以構建一個交互式菜單。 以下是輸出示例:
<div class="product">
<div class="productName">Child Admission</div>
<div class="quantity"><input type="text" name="quantity" placeholder="2" /></div>
<button type="button" onclick="addItem('Child Admission')">Add Item</button>
</div><!-- End of .product -->
這是我目前所擁有的,但是,我知道我很遠,因為我不確定如何解決這個問題。 它必須適用於任何以這種方式格式化的HTML。
function generateMenu(menuId) {
// Get the Total Number of Menu Items
var totalItems = $('#' + menuId + " .totalMenuItems" ).html();
if (DEBUG && DEBUG_INPUT) alert("Menu: " + menuId + "\n"
+ "Items: " + totalItems + "\n");
// Get a reference to the Menu
var menu = $('#' + menuId);
var menuItem = null;
//alert(menu.html());
if (DEBUG && DEBUG_GEN_MENU) alert("Number of Children: " + (menu.children('.menuItem').length));
if (DEBUG && DEBUG_GEN_MENU) alert("Children: " + "\n"
+ "firstChild: "
+ menu.contents().filter(function() {
return this.nodeType === 3;
})
.wrap( '<div class="productName"></div>' )
.end());
for (var i = 0; i < menu.childNodes.length; i++) {
if (menu.childNodes[i].className == "menuItem") {
menuItem = menu.childNodes[i];
console.log("MenuItem");
//processMenuItem(menuItem);
break;
}
}
我已經閱讀了文檔,但我正在努力讓contains()方法起作用。 請幫我找到選擇內容的最簡單,最快捷的方法。 謝謝!
您的編輯就像我即將發布的那樣出現了。 以下是一些能夠以正確的順序獲得產品的代碼。 您可能需要修改它以在函數中使用它。
$('#planetGranite').find('.productName').each(function(){
var title = $(this).text();
console.log(title);
});
你需要取得與類名的每個格的內容productName
使用.each()
函數為::
$(".productName").each(function(){
alert($(this).text());
});
為了更好地參考Demo,請使用此JSfiddle Link
$(document).ready(function() { var planet = $('#planetGranite'); planet.children('.menuItem').each(function(item) { var productId = $('.productId', this).text(); var productName = $('.productName', this).text(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="hiddenMenus"> <div id="planetGranite"> <div class="menuItem"> <div class="productId">1</div> <div class="productName">Child Admission</div> </div> <div class="menuItem"> <div class="productId">2</div> <div class="productName">Adult Admission</div> </div> <div class="menuItem"> <div class="productId">3</div> <div class="productName">Senior Admission</div> </div> <div class="menuItem"> <div class="productId">4</div> <div class="productName">Student Admission</div> </div> <!-- Variable For Loop (Easier than Child-Nodes) --> <div class="totalMenuItems">4</div> </div> </div><!-- End of #hiddenMenus -->
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.