如何将添加到一组li中

I have some markup like below

我有一些标记如下

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

Now I want to make it like this

现在我想这样做

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

Note: Ids like app-105 may change dynamically like app-200,app-201 etc. and more li's can be added in future.

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

How can I solve it with plain JavaScript or jQuery?

如何使用纯JavaScript或jQuery解决它？

Any help to start will be appreciated.

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

3 个解决方案

#1

You can use wrapAll()

你可以使用wrapAll（）

Iterate over all div using each()
使用each（）迭代所有div
get all li inside using children()
使用children（）获取所有li里面
Wrap it with ul using wrapAll()
用wrapAll（）用ul包装它

$('.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>

#2

What you've actually asked for is reasonably straightforward:

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

$('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>

But, the original markup is invalid, li elements can't be direct children of div. If you load that into a browser, the browser is free to relocate those elements as it sees fit. So be sure to test on your target browsers.

但是，原始标记无效，li元素不能直接使用div。如果将其加载到浏览器中，浏览器可以根据需要*重新定位这些元素。因此，请务必在目标浏览器上进行测试。

That won't handle cases where there's othe rstuff interspersed with the li elements, like this:

那将不会处理其中散布着li元素的rstuff的情况，如下所示：

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

...but I didn't get the impression you had that.

......但我没有得到你的印象。

#3

-1

First i add a ul to your div, then i add all the li's to that ul that have the id's that contain the string "app"

首先我向你的div添加一个ul，然后我将所有的li添加到那个包含字符串“app”的id的ul中

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

https://jsfiddle.net/gx505qey/

#1