jquery在unnested text

Question

这是一个非常难以找到标题的问题，但就是这样。

我有这个HTML，我无法改变

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

我想将内容应用到“列表的第一部分”和“列表的第二部分”部分，但不是嵌套的ul部分，如CSS转换scaleY，以及一个自定义的Jquery onClick方法。

所以，我想要的解决方案是JQueryly添加的方法。

这可能吗？

非常感谢

Answer 1

要实现此目的，您可以filter() li contents()检索其中的文本节点，然后将其包装在span中并应用所需的CSS规则。像这样：

$('#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>