如何添加 <ul> 到一群李

Question

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

<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>

注意：像app-105类的ID可能会像app-200 ， app-201等那样动态变化，将来可以添加更多li 。

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

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

Answer 1

您实际要求的是相当简单的：

 $('li[id^="app-"]').parent().each(function() { $(this).children('li[id^="app-"]').wrapAll('<ul class="ajax-terms"></ul>'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p>First</p> <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> </div> <p>Second</p> <div class="col-sm-4 col-md-4 col-lg-4 someclass"> <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> 

但是 ，原始标记无效， li元素不能是div直接子代。 如果将其加载到浏览器中，浏览器可以自由地重新放置那些认为合适的元素。 因此，请务必在目标浏览器上进行测试。

这将无法处理在其他情况下散布着li元素的情况，例如：

<div class="col-sm-4 col-md-4 col-lg-4 someclass">
  <li id="app-4">Book VIP Services</li>
  <div>something else</div>                <!-- <================ Note -->
  <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>

...但是我没有得到您的印象。

Answer 2

您可以使用wrapAll()

1. 使用each()遍历所有div
2. 使用children()获取所有li
3. 使用wrapAll()与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> 

Answer 3

首先，我向您的div添加一个ul，然后向该ul添加所有具有包含字符串“ app”的id的li。

$(".someclass").append("<ul id='yourUl'></ul>");
$("#yourUl").append($("[id*=app]"));

https://jsfiddle.net/gx505qey/