Получить значение href, используя HTML5 атрибуты данных

Question

Я хотел бы получить значение href, т.е. веб-ссылку, используя атрибут data.

У меня есть следующий фрагмент кода

<div class="my-item-details">

    <h3 class="my-item-title" data-item_item="x12"> 
        <a href="http://link.com">
            My Classic Box
        </a>
    </h3>

    <span class="my-item-price" data-item_item="x12">   
        38.00
    </span>

</div>

Следующие 2 фрагмента дают правый вывод.

var price_val = $('.my-item-price[data-item_uuid=x12]').text();
price_val = $.trim(price_val)
console.log(price_val);

38,00

var item_name = $('.my-item-title[data-item_uuid=x12]').text();
item_name = $.trim(item_name)
console.log(item_name);

Мой Classi c Box

Однако, когда я бегу этот код

var item_link = $('.my-item-title[data-item_uuid=x12]').attr("href");
item_link = $.trim(item_link)
console.log(item_link);

Я получаю пустую строку вместо http://link.com

Чего мне не хватает?

Answer 1

Вы пытаетесь получить атрибут href из элемента <h3> без свойства href:

Вы можете изменить селектор таким образом, чтобы получить правильный результат:

var item_link = $('.my-item-title[data-item_uuid=x12] > a').attr("href");

Это должно дать вам правильное значение.

Answer 2

.my-item-title[data-item_uuid=x12] выбирает элемент h3, который не имеет атрибута href.

Это есть только у элемента a.

Добавьте комбинатор-потомок и селектор типа:

.my-item-title[data-item_uuid=x12] a