javascript - 使用 HTML5 数据属性获取 href 值

Question

我想获取 href 的值，即使用 data 属性的 web 链接。

我有以下代码片段

<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);

我的经典盒子

但是，当我运行此代码时

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

我得到一个空字符串而不是http://link.com

我错过了什么？

标签： javascriptjqueryhtml

Answer 1

.my-item-title[data-item_uuid=x12]选择h3没有href属性的元素。

只有a元素有。

添加后代组合器和类型选择器：

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