如何将<ul>添加到一组li中
如何将<ul>添加到一组li中
提问于 2015-10-27 11:28:19
我下面有一些标记
<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 & 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 & split the tab</li>
</ul>
</div>注意:像app-105这样的Ids可能会像app-200、app-201等动态变化，以后还可以添加更多的li。
如何用普通的JavaScript或jQuery来解决这个问题？
如有任何帮助，我们将不胜感激。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-10-27 11:31:55
您可以使用wrapAll()
- 使用each()迭代所有div
- 使用
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 & 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 & split the tab</li>
</div>
Stack Overflow用户
发布于 2015-10-27 11:34:33
您实际要求的内容相当简单：
$('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 & 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 & split the tab</li>
</div>...but我没有得到你那样的印象。
Stack Overflow用户
发布于 2015-10-27 11:33:26
首先，我向您的div添加ul，然后将所有li添加到包含字符串"app“的id的ul中。
$(".someclass").append("<ul id='yourUl'></ul>");
$("#yourUl").append($("[id*=app]"));页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33366812
复制相关文章
相似问题
腾讯云开发者
