jquery不必要なテキストの周りのタグを追加

Question

これはタイトルを見つけるのは本当に難しい質問ですが、ここにあります。

私は

<ul> 
    <li> 
     First part of the list 
     <ul> 
      <li>item 1</li> 
      <li>item 2</li> 
     </ul> 
    </li> 
    <li> 
     Second part of the list 
     <ul> 
      <li>item 3</li> 
     </ul> 
    </li> 
</ul> 

を変更することはできませんそして、私は「リストの最初の部分」と「リストの第二部」の部分、に物事を適用したいことを、このHTMLを得ましたCSSトランスフォームscaleYやカスタムJquery onClickメソッドなど、ネストされたulの部分は含まれません。

私が望む解決策は、JQuerylyでそれらを追加する方法です。

これは可能ですか？

あなたはspanのそれをラップし、必要なCSSルールを適用し、その後、その中にテキストノードを取得するためにlicontents()をfilter()することができ、これを達成するためにあなたにたくさん

Answer 1

ありがとうございます。このような何か：

$('#container > ul > li').each(function() { 
 
    var foo = $(this).contents().filter(function() { 
 
    return this.nodeType == 3 && this.textContent 
 
    }).wrap('<span />'); 
 
});

#container > ul > li > span { 
 
    color: red; 
 
    display: inline-block; 
 
    transform: scaleY(2); 
 
    margin: 0 0 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <ul> 
 
    <li> 
 
     First part of the list 
 
     <ul> 
 
     <li>item 1</li> 
 
     <li>item 2</li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     Second part of the list 
 
     <ul> 
 
     <li>item 3</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>