0

例如，我有：

<span class="a">abcdef</span>
<span class="b">123456</span>
<span class="b">abc<span class="c">def</span>ghi</span>

<span class="b">并且只想像这样反转文本

<span class="a">abcdef</span>
654321
ihg<span class="c">def</span>cba

如何用 JQuery 做到这一点？

4

2 回答 2

3

你想做的可以描述为：

  • 反转每个 的子节点的顺序span.b。
  • 反转每个文本子节点中的文本。
  • 最后，将每个替换为其内容。

jQuery没有reverse方法，但是它有get可以将jQuery对象转换成数组的方法，而数组确实有reverse方法。然后我们把元素放回去。

jQuery 不能操作文本节点内容（它们的父元素的文本内容不足以满足我们的目的），但是各自的原生 DOM 接口已经很好地标准化了，所以我们可以使用它。不幸的是，字符串在 ES5 中没有反向方法。幸运的是，我们可以将它们转换为数组。

unwrap在这里似乎是一种有用的方法，但文档并不暗示它适用于非元素节点。span此外，即使它是空的，我们也想删除它。unwrap没有做到这一点。相反，我们可以使用replaceWith.

进一步的优化：因为我们无论如何都丢弃了跨度，我们不需要在跨度内实际反转它的孩子。replaceWith接受一个函数作为参数。我们可以使用它来最小化对replaceWith. 此外，我们希望避免$(this).contents().get()，因为这涉及每次迭代创建两个额外的 jQuery 元素。取而代之的是，我们可以使用childNodes具有相同功能的类数组。虽然这个类数组没有自己的reverse方法，但数组拥有的方法也可以在这里工作。

这应该做的工作：

$("span.b").replaceWith(function(){
  var children = this.childNodes;
  for(var i = 0; i < children.length; i++){
    if(children[i].nodeType === Node.TEXT_NODE){
       children[i].nodeValue = children[i].nodeValue.split("").reverse().join("");
    }
  }
  return [].reverse.call(children)
}
于 2013-05-27T20:04:41.873 回答
-1

这样的事情可能会有所帮助：

var span$ = $( '.b' ),
    txt = span$.text();
span$.prev().after( txt );
span$.remove();

还有unwrap功能 ih JQuery http://api.jquery.com/unwrap/

于 2013-05-27T18:03:08.640 回答