Question

我必须使用jquery将内容管理系统中用户输入的无序列表转换为引导菜单（navbar）。

80％除了一个挑战，我无法找到一个很好的解决方案 - 即一个使用选择器而不是字符串操作或正则表达式。毕竟，我们都知道我们永远不会用正则表达式解析html :)

因此，使用用户可以使用的有限UI工具，它们会生成一个列表，通常是两级嵌套列表，如下所示

<ul>
 <li>Blah1
  <ul>
   <li><a href='http://xxxx'>Blah1a</a></li>
   <li><a href='http://yyyy'>Blah1b</a></li>
   <li>Blah1c</li>
   <li><a href='http://zzzz'>Blah1d</a></li>
  </ul>
 </li>
 <li><a href='http://aaaa'>Blah2</a></li>
 <li>Blah3
  <ul>
   <li><a href='http://xxxx'>Blah2a</a></li>
   <li><a href='http://yyyy'>Blah2b</a></li>
  </ul>
 </li> 
</ul>

等等......重要的是，他们的一些列表项是链接，有些只是文本。

我需要选择＆lt; li＆gt;中包含的每个文本块。尚未包含在＆lt; a＆gt;中的并将其包装在＆lt; a href =“＃”＆gt;中以便将上述内容转化为：

<ul>
 <li><a href='#'>Blah1</a>
  <ul>
   <li><a href='http://xxxx'>Blah1a</a></li>
   <li><a href='http://yyyy'>Blah1b</a></li>
   <li><a href='#'>Blah1c</a></li>
   <li><a href='http://zzzz'>Blah1d</a></li>
  </ul>
 </li>
 <li><a href='http://aaaa'>Blah2</a></li>
 <li><a href='#'>Blah3</a>
  <ul>
   <li><a href='http://xxxx'>Blah2a</a></li>
   <li><a href='http://yyyy'>Blah2b</a></li>
  </ul>
 </li> 
</ul>

我确定不应该那么困难，但经过一个小时的游戏，我无处可去。

Answer 1

尝试

$('li').contents().filter(function(){
    return this.nodeType == 3 && $.trim($(this).text()).length > 0
}).wrap('<a href="#" />')

演示：Fiddle

Answer 2

这里有一行代码：

$("li").not(":has(>a)").wrapInner('<a href="#" />');

jsFiddle

所以，如果你想获取文本节点，是的，使用.contents()，它将获得所有节点，包括文本节点。以下是您可以使用的两种方法：

$("li").not(":has(>a)").contents().filter(function(){
    return this.nodeType == 3 && $.trim($(this).text()).length > 0
}).wrap('<a href="#" />');

jsFiddle

这是另一种方法，只是为了不同的东西：

$("li").not(":has(>a)").each(function(){
      var $contents = $(this).contents();
      if ($contents.length)
          $contents.eq(0).wrap('<a href="#" />');
});

jsFiddle

选择不是链接的列表项

2 个答案: