使用jQuery获取div第二个子元素文本及购物车产品价格显示问题

嘿，我看到你在开发在线购物车时卡在了价格展示这一步，核心问题出在你获取价格的JS代码语法上，咱们一步步来修复它！

问题分析 #

你注释掉的那行代码 let price = selectedItem.("nth-child(3)").text(); 缺少了正确的DOM选择方法（比如.find()或.children()），导致无法定位到价格元素并获取文本内容，这就是价格没法展示的原因。

修复方案 #

1. 修正价格获取代码 #

把注释掉的那行替换成正确的选择器语法，这里可以用.children()选中父元素下的第三个子元素（也就是价格<p>标签）：

let price = selectedItem.children("p:nth-child(3)").text().trim();

• .children() 用于获取当前元素的直接子元素
• .trim() 能去掉文本前后的空格，避免展示时出现多余空白

2. 完整修正后的JS代码 #

把修复后的代码整合到你的逻辑里，完整代码如下：

let selectedItem = $(this).parent();
if(!contains) {
 let price = selectedItem.children("p:nth-child(3)").text().trim(); // 修复后的价格获取逻辑
 let addedProduct = $("<div class='newProduct'></div>");
 addedProduct.append(selectedImage.clone()); // 注意：要确保selectedImage变量已提前定义哦
 addedProduct.append("<p>Anzahl: " + amount + "</p>" + "<p>" + price + "</p>");
 cart.append(addedProduct);
 content.append(cart);
}

3. 更稳定的优化建议 #

依赖nth-child定位元素有隐患：如果以后HTML结构调整（比如在价格前新增元素），选择器就会失效。更稳妥的方式是给价格标签加专属class：

<div id="shoe_one"> 
 <img src="imgs/img_0.JPG" id="training_shoe" alt="purple adidas shoe" width="150" class="product"> 
 <p>Adidas Courtset</p> 
 <p class="product-price">Preis: 59,90 €</p> <!-- 添加专属class -->
 <input type="button" value="Warenkorb" class="button"> 
</div>

之后JS里用class获取价格，稳定性更强：

let price = selectedItem.find(".product-price").text().trim();

这样修改后，购物车就能正常展示单个产品的价格啦！

内容的提问来源于stack exchange，提问作者xyz