Question

我需要用<textarea>标签包装一个元素的整个内容，减去被点击的元素。

HTML

<div>
    Some text
    <ul>
        <li>more content</li> 
    </ul>
    <span id="click2wrap"></span>
</div>

JS

$(document).on('click', '#click2wrap', function() {
    var wrapped = $(this).parent().text();
    $(wrapped).wrap('<textarea></textarea>'); 
});

所以，我的函数目前看起来像这样，当点击＃click2wrap时，它必须导致：

<div>
    <textarea>
    Some text
    <ul>
        <li>more content</li> 
    </ul>
    </textarea>
    <span id="click2wrap"></span>
</div>

Answer 1

首先，您无法在textarea中看到父html代码。要访问id元素，您应使用#符号。这意味着

$(document).on('click', 'click2wrap', function() {
    var wrapped = $(this).parent().text();
    $(wrapped).wrap('<textarea></textarea>'); 
});

应改为

$(document).on('click', '#click2wrap', function() {
    var wrapped = $(this).parent().text();
    $(wrapped).wrap('<textarea></textarea>'); 
});

要使用div元素使用.parent()功能，要使用ul元素使用.prev()功能。

更改

 $(document).on('click', '#click2wrap', function() {
     var wrapped = $(this).parent().text();
     $(wrapped).wrap('<textarea></textarea>'); 
 });

到

$(document).on('click', '#click2wrap', function() {
     var wrapped = $(this).prev();
     $(wrapped).wrap('<textarea></textarea>'); 
 });

Answer 2

使用wrapInner功能。此外，还必须在jquery中添加几个标签：JS Fiddle

因为textarea无法显示html标签，所以您需要获取文本区域的值（具有html标签）并在剥离标签时将该值重新输入到textarea中。

$(document).on('click', '#click2wrap', function () {
    var wrapped = $('#click2wrap').parent();
    $('#click2wrap').text('');
    $(wrapped).wrapInner('<textarea></textarea>');
    $('textarea').text($('textarea').text());
});

用HTML包装文本

2 个答案: