0

我正在尝试使用 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>
4

4 回答 4

4

假设您在点击功能上并点击了a.

$(this).closest(".products").find('h4').text();
于 2013-08-02T19:29:30.830 回答
0

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

当有人点击您需要文本的“在线购买”时会发生什么？您是在使用它进行演示，还是将这部分实际购买过程发送到后端（或类似的东西）？

相信最接近“在线购买”按钮的文本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>

:)

于 2013-08-02T19:37:47.950 回答
0

$(this).closest(".products h4").text(); 假设您始终将 h4 标签保留为 .products 的子标签，您会得到该文本。

于 2013-08-02T19:38:33.590 回答
0

获取方法很多。。

少数是..

使用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());
});
于 2013-08-02T19:29:48.063 回答