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包裹为红色。

这就是我想要的“结果”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部分

3 个答案: