Question

我正在尝试使用jQuery来抓取关闭用户点击的链接的<h4>标记。因此，从下面的示例代码中，如果有人点击了产品2标题下的“在线购买”链接，我想使用jQuery来获取此<h4>标记的文本，即“产品2”。

我尝试过以下操作但是它总是只会给我“产品1”作为值，尽管点击了哪个链接：

$(".products h4").first().text();

HTML：

<div class="products">
<h4>Product 1 Title</h4>
<p>Product 1 description</p>
<div class="buyatdealer">
<a class="buynow" href="buy/product1"><span>BUY ONLINE</span></a>
</div>
</div>

<div class="products">
<h4>Product 2 Title</h4>
<p>Product 2 description</p>
<div class="buyatdealer">
<a class="buynow" href="buy/product2"><span>BUY ONLINE</span></a>
</div>
</div>

<div class="products">
<h4>Product 3 Title</h4>
<p>Product 3 description</p>
<div class="buyatdealer">
<a class="buynow" href="buy/product3"><span>BUY ONLINE</span></a>
</div>
</div>

Answer 1

假设您使用点击功能并点击了a。

$(this).closest(".products").find('h4').text();

Answer 2

获得它的方法很多..

很少有人......

使用parents()

 $('.products a span').click(function(){
    alert($(this).parents('.products').find('h4').text());
});

使用closest()。

$('.products a span').click(function(){
    alert($(this).closest('.products').find('h4').text());
});

使用siblings()

$('.products a span').click(function(){
alert($(this).parents('.buyatdealer').siblings('h4').text());
});

Answer 3

我会尝试重新考虑你要解决的问题，然后是解决方案。

如果有人点击“在线购买”，您需要提供相关文字，会发生什么？您是使用它进行演示，还是将其作为实际购买流程的一部分，发送到后端（或类似的东西）？

信任最接近“在线购买”按钮的h4中的文字似乎容易出错。

作为DOM遍历和奇怪耦合的替代方法，您可以在“在线购买”按钮上设置数据属性吗？

<span data-product-id="0" data-product-name="Product One">BUY ONLINE</span>

......甚至更好......

<button data-product-id="0" data-product-name="Product One">BUY ONLINE</button>

：）

Answer 4

$（this）.closest（“。products h4”）。text（）;假设你总是把h4标签保留为.products的孩子。

jQuery选择器 - 选择正确的<h4>标签</h4>

4 个答案: