Question

我有以下html：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <span>not so important</span>
  <span title="some specific text"><img src="/img/some.gif" /></span>
  <span title="more specific text">important 1</span>
  <span title="more specific text">important 2</span>
  <span title="more specific text">important 3</span>
  <span title="more specific text"><img src="/img/some.gif" /></span>
  <ul>
    <li>example 1</li>
    <li>example 2</li>
    <li>example 3</li>
  <ul>
  <script>
    var ul = $('body').append($('<ul>'));
    $("span[title*='specific text']")
        .contents()
        .filter(function(){ return $(this).nodeType != 1; })
        .each(function(){
            ul.append($('<li>' + $(this).text() + '</li>'));
        })
  </script>
</body>
</html>

我想检索'span'中的文本，其标题属性包含“特定文本”，在本例中为“重要1”，“重要2”和“重要3”。然后我想在下面列出它们就像示例一样。然而子弹没有出现，为什么呢？任何提示都将不胜感激！

编辑： http://jsfiddle.net/XTqjC/3/这是执行我需要它做的事情的代码。感谢Glen和meo

Answer 1

在您的示例中，您尚未正确关闭<ul>（缺少斜杠）。这是复制+粘贴错误，还是在您的代码中？

编辑：并且~~你需要~~最好在每个（）后面加分号（见注释）：

.each(function(){
  ul.append('<li>' + $(this).text() + '</li>');
});

尝试以下方法：

var newUL = $('<ul/>');    //due credit to meo (see below)
$('body').append(newUL);
$("span[title*='specific text']")
    .contents()
    .filter(function(){ return $(this).nodeType != 1; })
    .each(function(){
        $("body ul").append('<li>' + $(this).text() + '</li>');
    });

当然，$(this).text()不允许您将<img>放入<li>。所以你最终会得到一个空的<li></li>。这可以通过以下方式解决：

.each(function(){
  if ($(this).text().trim() != "") {
    $("body ul").append('<li>' + $(this).text() + '</li>');
  }
});

Answer 2

我已更正您的代码。你有一些错误：

http://jsfiddle.net/XTqjC/2/

这是我的版本：

var ul = $('<ul/>');
$('body').append(ul)
$("span[title*='specific text']")
    .contents() // you actually don't need contents()
    .filter(function(){ return $(this).nodeType != 1; })
    .each(function(){
        ul.append('<li>' + $(this).text() + '</li>');
    })

执行此操作时：var ul = $('body').append($('<ul>'));

ul变量包含正文，而你的li不会附加到UL而是附加到正文。当你使用追加时，你不必把$()放在

jQuery：附加列表不显示项目符号

2 个答案: