Question

我只需要操作嵌套列表的文本，而无需触摸下一个ul。我有这个：

<ul>
    <li>Some text here
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li>Another text here
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

我想将内部文本包装在一个跨度中，这样我将得到：

<ul>
    <li><span>Some text here</span>
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li><span>Another text here<span>
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

Answer 1

您可以这样操作（插入的span元素具有红色文本颜色）：

首先选择所需的li元素（'ul> li> ul> li：last-of-type'），然后获得包含“此处另存文本”的文本节点（item.firstChild），创建一个span元素内容，并用您的跨度替换。

let item = document.querySelector('ul > li > ul > li:last-of-type');

let text = item.firstChild.textContent;
let span = document.createElement('span');
span.textContent = text;
span.style.color = 'red';

item.replaceChild(span, item.firstChild);

<ul>
    <li>Some text here
        <ul>
            <li>Lorem</li>
            <li>ipsum dolor</li>
            <li>Another text here
                <ul>Lorem ipsum dolor</ul>
            </li>
        </ul>
    </li>
</ul>

Answer 2

我知道这是jQuery和Vanilla的结合，但这对我有用：

$('.in-documents ul li').each(function() {
   var text = $(this).clone().children().remove().end().text();

    if($(this)[0].firstChild.textContent != "") {
        var span = document.createElement('span');
        span.textContent = text;
        $(this)[0].firstChild.textContent = '';
        $(this).prepend(span);
    }
});

仅定位文本，不定位嵌套元素

2 个答案: