如何将<ul>添加到li组

debugcn 发表于 Dev

希兰娅·萨玛（Hiranya Sarma）

我有一些像下面这样的标记

<div class="col-sm-4 col-md-4 col-lg-4 someclass">

     <li id="app-105">Find Friends</li>
     <li id="app-107">Buy Tickets,Pay Cover Charges</li>
     <li id="app-3">Pre-purchase bottle service</li>
     <li id="app-4">Book VIP Services</li>
     <li id="app-5">Buy Merchandise</li>
     <li id="app-6">Toast Friends worldwide</li>
     <li id="app-7">Notify Services &amp; split the tab</li>

</div>

现在我要像这样

<div class="col-sm-4 col-md-4 col-lg-4 someclass">

    <ul class="ajax-terms">

      <li id="app-105">Find Friends</li>
      <li id="app-107">Buy Tickets,Pay Cover Charges</li>
      <li id="app-3">Pre-purchase bottle service</li>
      <li id="app-4">Book VIP Services</li>
      <li id="app-5">Buy Merchandise</li>
      <li id="app-6">Toast Friends worldwide</li>
      <li id="app-7">Notify Services &amp; split the tab</li>

   </ul>

</div>

注意：的IDapp-105可能会像一样动态变化app-200，app-201等等li，以后可以添加更多。

如何使用普通的JavaScript或jQuery解决它？

任何帮助开始将不胜感激。

普拉纳夫·C·巴兰（Pranav C Balan）

您可以使用 wrapAll()

使用遍历所有div each()
充分li利用children()
ul使用包装wrapAll()

$('.someclass').each(function() {
  $(this).children('li').wrapAll($('<ul/>', {
    class: 'ajax-terms'
  }));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-sm-4 col-md-4 col-lg-4 someclass">

  <li id="app-105">Find Friends</li>
  <li id="app-107">Buy Tickets,Pay Cover Charges</li>
  <li id="app-3">Pre-purchase bottle service</li>
  <li id="app-4">Book VIP Services</li>
  <li id="app-5">Buy Merchandise</li>
  <li id="app-6">Toast Friends worldwide</li>
  <li id="app-7">Notify Services &amp; split the tab</li>

</div>

<div class="col-sm-4 col-md-4 col-lg-4 someclass">

  <li id="app-105">Find Friends</li>
  <li id="app-107">Buy Tickets,Pay Cover Charges</li>
  <li id="app-3">Pre-purchase bottle service</li>
  <li id="app-4">Book VIP Services</li>
  <li id="app-5">Buy Merchandise</li>
  <li id="app-6">Toast Friends worldwide</li>
  <li id="app-7">Notify Services &amp; split the tab</li>

</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。