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

您实际要求的内容相当简单：

＆＃13;

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

＆＃13;

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

＆＃13;

但是，原始标记无效，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>  <li id="app-5">Buy Merchandise</li> <li id="app-6">Toast Friends worldwide</li> <li id="app-7">Notify Services & split the tab</li> </div>

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

Answer 2

您可以使用 wrapAll()

使用 each()
使用 children()

li

使用 wrapAll()

ul

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

https://jsfiddle.net/gx505qey/

如何将<ul>添加到一组li中

3 个答案: