Question

我正在尝试将<i></i>标记内的给定元素中的每个char包装起来。到目前为止，我已尝试过两种方法，但每种方法都有一些问题。

第一种方法：

我将包裹的元素的.html()的每个字符替换掉版。问题是它还将标记视为字符并将它们包装起来。

$(function() {
  $(document).click(function(e) {
    var element = e.target;
    if ($(element).text() != '') { //Contains text
      var txt = $(element).contents().filter(function() {
        return this.nodeType === 3;
      }).text();
      if (txt != '') { //Text outside span
        var chars = $(element).html().split('');
        var newChars = '';
        $.each(chars, function(i, el) {
          newChars += "<i>" + el + "</i>";
        });
        $(element).html(newChars);
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  Lorem <span>teeest</span> ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aspernatur ducimus autem eveniet porro vitae ratione illum totam voluptatem alias. Impedit deserunt maiores excepturi ab repellendus atque aperiam quisquam iste! Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Saepe quasi mollitia perspiciatis explicabo, maxime quae</p>

第二种方法：

我尝试了一种递归方法，它遍历我元素的子元素并替换每个元素中的文本。问题是，我的输出文本不知何故加倍，孩子们在结果中放错了位置。

function recursiveReplace(element) {
  if ($(element).children().length > 0) {
    $(element).children().each(function() {
      recursiveReplace($(this)[0]);
    });
  }
  var chars = $(element).contents().filter(function() {
    return this.nodeType === 3;
  }).text().split('');
  var newChars = '';
  $.each(chars, function(i, el) {
    newChars += "<i>" + el + "</i>";
  });
  console.log(newChars);
  $(element).contents().filter(function() {
    return this.nodeType === 3;
  }).replaceWith(newChars);

}

$(function() {
  $(document).click(function(e) {
    var element = e.target;
    if ($(element).text() != '') { //Contains text
      var txt = $(element).contents().filter(function() {
        return this.nodeType === 3;
      }).text();
      if (txt != '') { //Text outside span
        recursiveReplace(element);
      }
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  Lorem <span>teeest</span> ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aspernatur ducimus autem eveniet porro vitae ratione illum totam voluptatem alias. Impedit deserunt maiores excepturi ab repellendus atque aperiam quisquam iste! Lorem
  ipsum dolor sit amet, consectetur adipisicing elit. Saepe quasi mollitia perspiciatis expli</p>

你们有没有人知道如何实现这个目标？

Answer 1

如果您单独处理每个文本节点而不是按照您的方式连接它（由于在过滤的集合上运行text()），您的递归方法应该有效

function recursiveReplace(element){
  $(element).children().each(function() {
    recursiveReplace(this);
  });

  $(element).contents()
    .filter(function(){ return this.nodeType === 3; })
    .each(function(){
      var wrapped = '<i>' + this.textContent.split('').join('</i><i>') + '</i>';
      console.log(wrapped);
      $(this).replaceWith(wrapped);
    });
}

请注意我是如何简化你的递归调用的，在使用each()时无需检查是否有任何子节点，并且包装this只是为了立即解包它没有意义。

将每个字符包裹在<i>中

第一种方法：

第二种方法：

1 个答案: