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>標記

回答

相關問題