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

Question

我有这个html

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

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

<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');
});