使用HTML5数据属性获取href值

Question

我想使用 data 属性获取 href 的值，即 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 个片段给出了正确的 output。

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

我错过了什么？

Answer 1

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

只有a元素有。

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

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

Answer 2

您正在尝试从没有 href 属性的<h3>元素中获取属性 href：

您可以通过这种方式对选择器进行更改以获得正确的结果：

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

这应该给你正确的价值。