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部分與其他元素分開

回答

相關問題