Question

我尝试使用jquery将没有它的子元素的ul元素的html内容复制到输入框（到value参数）。有可能吗？

这是我的代码：

<ul id="from">
    <li>test 1<button type="button" class="delete">DEL</button></li>
    <li>test 2<button type="button" class="delete">DEL</button></li>
    <li>test 3<button type="button" class="delete">DEL</button></li>                            </ul>

<input type="text" id="to" value="...">
<button type="button" id="btn" valu="copy">COPY</button>
<script>
$(document).ready(function(){
    $('#btn').click(function()
                     {
                       $('#to').val($('#from').html());
                     });
    });
</script>

我想看看这些修改过的li元素（没有按钮）：

<li>test 1</li>
<li>test 2</li>
<li>test 3</li>

这将是结果输入标记：

<input type="text" id="to" value="<li>test 1</li><li>test 2</li><li>test 3</li>">

Answer 1

您可以clone和remove不需要的元素：

$('#btn').on('click', function(e) {
    $('#to').val($('#from').clone()
           .find('button').remove().end().html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul id="from">
    <li>test 1
        <button type="button" class="delete">DEL</button>
    </li>
    <li>test 2
        <button type="button" class="delete">DEL</button>
    </li>
    <li>test 3
        <button type="button" class="delete">DEL</button>
    </li>
</ul>

<input type="text" id="to" value="...">
<button type="button" id="btn" valu="copy">COPY</button>

Answer 2

克隆并删除按钮。

var temp = $('#from').clone()
temp.find("button").remove()
console.log(temp.html())

Answer 3

你想要这样的东西吗？

＆＃13;

$(document).ready(function(){
  $('#btn').click(function() {
    var clone = $("#from").clone();
    clone.find("button").remove();
    $('#to').val(clone.html().replace(/ /g, ""));
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="from">
    <li>test 1<button type="button" class="delete">DEL</button></li>
    <li>test 2<button type="button" class="delete">DEL</button></li>
    <li>test 3<button type="button" class="delete">DEL</button></li>
</ul>

<input type="text" id="to" value="...">
<button type="button" id="btn" valu="copy">COPY</button>

＆＃13;

jquery复制html内容而没有子内容

3 个答案: