Question

这可能是一个虚假的问题。我试图将无序列表的内容导出到文本区域，并在导出时删除列表项。我已经在某种程度上实现了它，但它只带来了第一个列表项。我怎样才能出口所有的李？

HTML：

 <div class="wrapper">
    <button id="exportBtn">Export</button>
    <div class="container">
        <ul class="structure">
            <li>Something</li>
            <li>Something else</li>
        </ul>
    </div>
    <div class="text">
        <textarea id="exportTxt" contenteditable style=""></textarea> 
    </div>
</div>

这是我的剧本：

$(function() {
  $( "#exportBtn" ).click(function() {
    var htmlString = $('.structure li').html();

    $('textarea#exportTxt').html(htmlString).parent().is( 'li' ).htmlString.unwrap();
    $('textarea#exportTxt').addClass('slideIn');
  });
});

Answer 1

<强> View working demo

所以你想要它阅读SomethingSomething else。

$(function() {
  $( "#exportBtn" ).click(function() {
      var html = ''; // start with empty
      $('.structure li').each(function(){
          html += $(this).html(); // append the html from each li
          $(this).remove(); // remove the li
      });
      $('#exportTxt').val(html); // set it in the textarea
  });
});

Answer 2

试试这个：

<强> JS

$("#exportBtn").click(function() {
    var list="";
    $(".structure").children().each(function(){
        list +=$(this).html() + " ";
    });
    $('textarea#exportTxt').val(list);
});

fiddle

Answer 3

这是一个带有工作演示的jsfiddle：http://jsfiddle.net/Grimbode/PucV2/ 希望这是你想要的。

JS：

  $( "#exportBtn" ).on('click', function() {
      $('.structure li').each(function(){
          var txt = $('#exportTxt').text();
          $('#exportTxt').empty();
          $('#exportTxt').text(txt + ' ' + $(this).text());
          $(this).remove();
      });
  });

html：

<ul class="structure">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<button id="exportBtn">Export</button>
<textarea id="exportTxt"></textarea>

如何在按钮点击时从ul解包所有li

3 个答案: