5

ユーザーがコンテンツ管理システムに入力した順序付けられていないリストを、jquery を使用してブートストラップ メニュー (ナビゲーション バー) に変換する必要があります。

良い解決策を見つけることができない 1 つの課題 (つまり、文字列操作や正規表現ではなくセレクターを使用する課題) を除いて、80% はあります。結局のところ、正規表現で html を解析することは決してないことは誰もが知っています :)

したがって、ユーザーが自由に使える限られた UI ツールを使用して、リストを生成します。通常は、次のような 2 レベルのネストされたリストです。

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

などなど... 重要なことは、リスト項目の一部がリンクであり、一部が単なるテキストであることです。

<a> にまだラップされていない <li> に含まれるテキストの各ブロックを選択し、それを <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>

それほど難しいことではないはずですが、1時間プレイした後、どこにも行きません.

4

2 に答える 2

3

試す

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

デモ:フィドル

于 2013-09-09T04:59:50.113 に答える