jquery - 难以从 HTML 字符串中找到特定 Span 的内部文本

Question

我是 Jquery 的新手，在识别 HTML 字符串中的特定标记时遇到问题。我的 HTML 字符串是:

<span id="name">myname</span>  
<span id="familyname">mysurname</span>     
<span id="telnum">mytelnum</span>  
<span id="postcode">myPostCode</span> 
<span id="email">my@email.com</span>

我想要的是将每个 span 内部文本放在单独的变量中。

预期的结果是:

var a = 'myname';
var b = 'mysurname';
var c = 'telnum';
var d = 'myPostCode';
var e = 'my@email.com';

但在我的代码中，查找功能似乎不起作用!这是我的代码:

var myHtmlCode = '<span id="name"> myname</span> <span id="familyname">mysurname</span> <span id="telnum"> mytelnum</span><span id="postcode"> myPostCode</span><span id="email">my@email.com</span>';

var $temp = $(myHtmlCode).find('span').contents().each(function() {
    alert(this.val());  
});

感谢任何帮助....

Answer 1

不要调用contents，它在这里没有用，因为您可以从span 元素中调用text 函数。

如果您希望能够探索已解析的字符串，则必须将跨度嵌入到一个顶级元素中。

你可以像这样把文本放在一个对象中:

var texts = {};
$('<div>'+myHtmlCode+'</div>').find('span')
  .each(function(){ texts[this.id] = $(this).text() });

然后您可以读取文本，例如 texts.name。

Demonstration (打开控制台可以看到 texts 对象)。

当然你也可以把它当作全局变量，也就是使用 window.name 而不是 texts.name，但是真的建议避免弄乱全局命名空间。