将li内部的文本更改为图像

Change text inside li with image

本文关键字：图像 文本 li 内部      更新时间：2023-09-26

我想更改li中的文本。但是这个li有一个img。这里的html:

<div>
<ul>
<li><b><img src="../../../Images/folder1/image1.png">Text1</b><i>0</i></li>
<li><b><img src="../../../Images/folder1/image2.png">Text2</b><i>1</i></li>
<li><b><img src="../../../Images/folder1/image3.png">Text3</b><i>2</i></li>
<li><b><img src="../../../Images/folder1/image4.png">Text4</b><i>3</i></li>
<li><b><img src="../../../Images/folder1/image5.png">Text5</b><i>4</i></li>
</ul>
</div>

我正在尝试这个：

$("li").each(function () {
$(this).text(sometext);
})

但它正在取代所有内容，包括img。我只想更改文本：文本1，文本2，。。。

有什么想法吗？

谢谢！

要访问元素中的文本节点，需要按nodeType使用contents()，然后使用filter()。然后可以使用replaceWith()来更改文本。试试这个：

$('li:first b').contents().filter(function() {
    return this.nodeType == 3;
}).replaceWith('foo');

小提琴示例

很明显，我将其硬编码为使用第一个li元素，但您可以根据需要更改选择器。

您也可以这样做：

http://jsfiddle.net/YNLXQ/

$("li b").each(function () {
   this.childNodes[1].textContent = "32323";
})

将图像存储在一个单独的变量中，替换文本后将图像前置。

$("li b").each(function () {
    var $img = $(this).find('img'); 
    $(this).text(sometext).prepend($img);
})
相关文章：