jQuery选择器 - 选择合适<h4>标记

我正在尝试使用jQuery来抓取关闭到用户点击的链接的<h4>标记。因此，从下面的示例代码中，如果有人点击Product 2标题下的“BUY ONLINE”链接，我想使用jQuery来获取这个<h4>标签的文本，即“Product 2”。jQuery选择器 - 选择合适<h4>标记

我曾尝试以下，但它总是只给我“产品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>

来源

2013-08-02 user2647092

'first（）'将总是选择第一个'h4'。 –

看看jQuery的树遍历方法：http://api.jquery.com/category/traversing/tree-traversal/。 –

Asuming你在点击功能并点击a。

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

来源

2013-08-02 19:29:30

很多方法可以得到它..

饥荒早期预警系统是..

使用closest()使用parents()

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

。

$('.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-02 19:29:48 bipen

我会尝试重新思考你想解决的问题，然后解决方案。

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

信任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-02 19:37:47 Stephen

$（本）.closest（”产品H4" ）文本（）;会让你的文本，假设你始终保持h4标签作为.products的孩子。

来源

2013-08-02 19:38:33 Casey

jQuery选择器 - 选择合适<h4>标记

回答

相关问题