Jquery 从其他元素中选择 LI 的 TEXT 部分

Question

我需要在 jQuery 中处理大量 li 元素，其中每个元素都有一个 <b></b> 元素，后跟 li 的文本。见代码：

$("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 单词。

这是我希望 "result" html 的样子：

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

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

谢谢！

Answer 1

如果您想避免 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/

Answer 2

这是我能做到的最好方法：

$( "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;
});

Answer 3

这可以完全 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>

Jquery 从其他元素中选择 LI 的 TEXT 部分

Jquery selecting TEXT part of LI apart from other elements

jquery

jquery-selectors