jquery选择LI的TEXT部分与其他元素分开

我需要在jQuery中处理大量的li元素，其中每个元素都有一个<b></b>元素，后面跟着li的文本。看到代码：jquery选择LI的TEXT部分与其他元素分开

$("li b").wrap(function() { 
 
    return '<font color="blue">' + $(this).text() + '</font>'; 
 
}); 
 
$("li::innerText").wrap(function() { 
 
    return '<font color="red">' + $(this).innerHTML() + "</font>"; 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li><b>hello</b>xxx</li> 
 
</ul>

在上述例子中我所需要的单词hello被包裹在蓝色和包裹在红色字xxx。

这里是我想什么“结果” HTML是：

<ul> 
    <li><font color="blue"><b>hello</b></font><font color="red">xxx</font></li> 
</ul>

注：我已经简化了我的问题。实际的包装会更复杂（所以CSS解决方案不是我所期待的）。

谢谢！

来源

2016-07-26 checklist

为什么不把整个'li'红色。然后用'b'元素的蓝色覆盖它。 –

你有多个'li'吗？你可以请张贴预期的HTML结果吗？ –

我正在寻找jQuery的方式来包装LI的TEXT部分。我将添加预期的HTML.Thanks。 – checklist

这是我能做到这一点的最好办法：

$("li").html(function(index, oldHtml) { 
    var pos = oldHtml.indexOf('</b>'); 
    var result = '<font color="blue">' + oldHtml.substring(0, pos+5) + '</font>' 
    + '<font color="red">' + oldHtml.substring(pos+5) + '</font>'; 
    return result; 
});

来源

2016-07-27 15:54:53 checklist

如果你想避免一个CSS解决方案，下面的工作。

var lis = $("li"); 

for(var i = 0; i < lis.length; i++){ 
    var li = $("li").eq(i); 
    var b = li.find("b").detach(); 
    li.wrapInner("<span style='color:red'>"); 
    b.css("color", "blue"); 
    li.prepend(b); 
}

参见：https://jsfiddle.net/cpw88b1z/

来源

2016-07-26 18:15:59

谢谢，但是这个解决方案用颜色包装整个li：红色，我正在寻找一些东西，只会包装它的文本部分 – checklist

如果给出的答案没有帮助你，可能需要显示更多的代码，即使它是更复杂。 –

我不认为需要更多的代码。我只是寻找jQuery代码，可以分别包装里面的两个元素：和李的文字。如hello and xxx – checklist

这可以在全jQuery的完成或jQuery和纯JavaScript的混合。

font tag is deprecated所以我用span来代替。

解决方案一：

$(function() { 
 
    $("li b").wrap('<span style="color: blue;"/>'); 
 
    $('li').contents().filter(function() {return this.nodeType === 3;}).wrap('<span style="color: red;"/>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<ul> 
 
    <li><b>hello</b>xxx</li> 
 
</ul>

的混合溶液：

$(function() { 
 
    $('li').contents().each(function(index, element) { 
 
    if (this.tagName === 'B') { 
 
     this.innerHTML = '<span style="color: blue;">' + this.innerHTML + '</span>'; 
 
    } else { 
 
     if (this.nodeType === 3) { 
 
     var temp = document.createElement('font'); 
 
     temp.innerHTML = '<span style="color: red;">' + this.data + '</span>'; 
 
     this.parentNode.insertBefore(temp, this); 
 
     this.parentNode.removeChild(this); 
 
     } 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li><b>hello</b>xxx</li> 
 
</ul>

来源

2016-08-08 10:08:24 gaetanoM

jquery选择LI的TEXT部分与其他元素分开

回答

相关问题