如何使用jquery将元素 Package < li>在标签内< ul>?

ne5o7dgx  于 2023-01-30  发布在  jQuery
关注(0)|答案(2)|浏览(163)

我的html

<div class="note">
  <div class="fielditem">
   test one<br>
   test two
  </div>
</div>

我用jquery把每一行都用li Package 起来,效果很好。

jQuery(document).ready(function($) {
  var listHTML = $('.note .fielditem').html();
  if (listHTML !== undefined && listHTML !== null) {
  var listItems = listHTML.split('<br>');
  $('.note .fielditem').html('');
  $.each(listItems, function(i, v) {
    var item = '<li>' + v + '</li>';
    $('.note .fielditem').append(item);
  });
 }
});

现在,我想在所有li项周围插入ul标记,如下所示

<div class="note">
  <div class="fielditem">
   <ul>
    <li>test one</li>
    <li>test two</li>
    </ul>
  </div>
</div>

已尝试搜索,但无法找到相关答案。感谢您的帮助。

pftdvrlh

pftdvrlh1#

试试这个。

jQuery(document).ready(function($) {
  var listHTML = $('.note .fielditem').html();
  if (listHTML !== undefined && listHTML !== null) {
    var listItems = listHTML.split('<br>');
    $('.note .fielditem').html('');
    $.each(listItems, function(i, v) {
      var item = '<li>' + v + '</li>';
      $('.note .fielditem').append(item);
    });
    $('.note .fielditem li').wrapAll('<ul>');
  }
});

这将选择. fielditem div中的所有<li>元素,并使用.wrapAll()方法将它们全部 Package 在<ul>标记中。

icnyk63a

icnyk63a2#

试试这个
答复1:

jQuery(document).ready(function ($) {
   var listHTML = $(".note .fielditem").html();
   var elementList = $(".note .fielditem");
   if (listHTML !== undefined && listHTML !== null) {
     var listItems = listHTML.split("<br>");
     $(".note .fielditem").html("");

     let my_ul = $("<ul>");
     $.each(listItems, function (i, v) {
       my_ul.append($("<li>").append(v));
     });
     elementList.append(my_ul);
    }
});

答复2:

jQuery(document).ready(function ($) {
  var listHTML = $(".note .fielditem").html();
  var elementList = $(".note .fielditem");
  if (listHTML !== undefined && listHTML !== null) {
    var listItems = listHTML.split("<br>");
    $(".note .fielditem").html("");

    let my_ul_list = "<ul>";
     $.each(listItems, function (i, v) {
     my_ul_list += "<li>"+v+"</li>"
     });
     my_ul_list += "</ul>"
     elementList.html(my_ul_list) 
   }
});

相关问题