score:0

many ways to get it..

fews are..

using parents()

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

using closest().

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

using siblings()

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

score:0

I would try to re-think the problem you're trying to solve, and then the solution.

What happens when someone clicks "BUY ONLINE" that you need the text for? Are you using it for presentation, or is this part of the actual purchase process, sent off to the backend (or something similar)?

Trusting the text in an h4 closest to a "BUY ONLINE" button seems error-prone.

As an alternative to this DOM traversal and strange coupling, could you instead set a data-attribute on the "BUY ONLINE" button?

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

... or even better ...

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

:)

score:0

$(this).closest(".products h4").text(); would get you that text, assuming you always keep the h4 tag as a child of .products.

score:4

Asuming you are on the click function and clicked the a.

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

Related Query

More Query from same tag