jquery - 在 jquery 中使用 .data() 时获取 html 标签之间的值

Question

如果使用 data()，如何获取 & 中的值？

示例代码：

<span data-name="username"> James</span>

我可以通过使用获取数据名称的值：$("span:visible").data("name"); // OUTPUT : username 但我想获取值“James”，我尝试在最后添加 .text() 和 .val()，但它不起作用。

谢谢。杰克

Answer 1

您可以使用Attribute Equals选择器来匹配元素，并使用text()方法获取其内部文本内容：

var spanText = $("span[data-name='username']:visible").text();

如果之前的空格字符James很重要，并且您不希望它出现在您获取的值中，则可以应用$.trim()：

var trimmedSpanText = $.trim($("span[data-name='username']:visible").text());

Answer 2

要获得“詹姆斯”，请使用

$('span:visible[data-name="username"]').text().trim();

Answer 3

另一种方法是：

$("span:visible").html()

Answer 4

如果你使用它会起作用：

$('span').text();

当你使用这个

$("span:visible").data("name")

控制权转移到 data() ，因此 javascript 无法理解该元素是从哪里提取 text() 的。

Answer 5

<span id="spanTestData" data-name="username"> James</span>
$(document).ready(function () {
    $.trim($('#spanTestData').text());
});

//=================================或==============/ /

<span data-name="username"> James</span>

$(document).ready(function () {
    $.trim($('span[data-name]:first').text());
});

//=================================或==============/ /

演示

<span data-name="username"> James</span>

<span id="spanTestData" data-name="username"> James 2</span>

<h1 style="font-size:larger; font-weight:bolder;"></h1>


 $(document).ready(function () {
        $('h1').text($.trim($('span[data-name]:first').text()) + ' ||| ' + $.trim($('#spanTestData').text()));
    });