javascript - jQuery 换行没有容器的文本

Question

我有这个html

<div>This text is <strong>really</strong> awesome!</div>

我想包裹在里面<span>单击文本的一部分。所以如果你点击This text is部分你应该得到

<div><span>This text is </span><strong>really</strong> awesome!</div>

与 div 的任何原子部分相同

我正在尝试制作 $('div').click();事件，但我找不到如何只检测点击的部分，如果它没有被包裹在某些东西里面(<strong>really</strong> 部分没问题，但它之前和之后的部分不行)

Answer 1

您可能想查看 .contents() 方法。这将为您提供文本节点和包装节点，因此您可以包装它们。要调整 jQuery 文档中的示例:

$(".container")
    .contents()
    .filter(function() {
        // get only the text nodes
        return this.nodeType === 3;
    })
    .wrap( "<span></span>" );

听起来您想要在点击 之后包装内容，我认为这可能相当困难。如果可能，最好在用户点击 之前包装内容，然后将样式应用于他们点击的 span - 这样更直接。如果您使用上面的代码进行包装，则可以应用像这样的处理程序

$(".container").on('click', 'span', function() {
    $(this).addClass('clicked');
});