найти href внутри H3

Question

Я не могу понять, что я делаю неправильно с приведенным ниже кодом. Я пробовал почти все, что я могу найти на этом форуме без успеха. Я пытаюсь получить значение «href» внутри тега H3.

HTML

<div class="product" style="opacity: 1;"> 
    <a title="product" href="url-to-product.com">..................</a> 
    <h3><a href="url-to-product.com">Blabla</a></h3> 
</div> 
<div class="product" style="opacity: 1;"> 
    <a title="product" href="other-url-to-product.com">..................</a> 
    <h3><a href="other-url-to-product.com">Blabla</a></h3> 
</div> 

Мне нужно получить значение из HREF внутри тега h3 и сделать его переменную для использования в функции getJSON. Я пробовал такие вещи, как самые близкие, братья и сестры:

$(".opener").live("click", function(event) { 
     event.preventDefault(); 
     $.get($(this).attr('href'), function(data, status) { 
     $("#dialog").dialog("open"); 

     **var url = $('.product h3 > a').attr('href')+'?format=json';** 

     $.getJSON(url, function(data) {   

Я всегда получаю сообщение об ошибке «undefined». Я не вижу, что я делаю неправильно.

Answer 1

Почему не используется:

$('h3 a').attr('href') 

Есть еще много способов решить эту проблему, это зависит от своих потребностей.

Answer 2

Вы должны сделать:

$('.product').find('h3 > a').attr('href') 

Answer 3

Таргетинг на h3-элемент и пытается получить его «href'-атрибут. То, что вы хотите сделать, - это target -element внутри -element и получить его атрибут href.

$(this).find("h3").children('a').attr('href'); 

Answer 4

Попробуйте так:

$('.product h3 > a').attr('href') 

$(".product").each(function(){ 
    var a_href = $(this).find('h3 > a').attr('href'); 
    alert ("Href is: "+a_href); 
}); 

FIDDLE