5

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

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>

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

我需要选择 <li> 中尚未包含在 <a> 中的每个文本块，并将其包装在 <a href="#"> 中，以便将上述内容转换为：

<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>

我敢肯定，这不应该那么难，但是玩了一个小时后，我一无所获。

4

2 回答 2

3

这里有一行代码：

$("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

于 2013-09-09T05:08:45.713 回答
3

尝试

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

演示：小提琴

于 2013-09-09T04:59:50.113 回答