Question

我有一系列div标签如下：

<div>
    <div class="MB_SLOT" id="slot1"></div>
    <div class="MB_SLOT" id="slot2"></div>
    <div class="MB_SLOT" id="slot3"></div>
    <div class="MB_SLOT" id="slot4"></div>
</div>

我想将MB_SLOT元素放入无序列表（ul）但是所有内容（包括包含div）都是由我无法控制的API和生成的数量生成的元素因页面而异。

如果我使用j$( ".MB_SLOT" ).wrap( "<li></li>" );我可以包装每个MB_SLOT元素，但我不知道如何将其包装在<ul></ul>

中

有人可以就实现这一目标的最佳方法提出建议吗？

Answer 1

给你的李一个更具特异性的课程

$( ".MB_SLOT" ).wrap( "<li class='list-item'></li>" );

然后使用.wrapAll（）来包装“list-item”的所有实例

$( ".list-item" ).wrapAll( "<ul></ul>" );

Working fiddle

Answer 2

父级是否始终相同，是<div>元素？

如果是这样，你可以使用：

var parent = $( ".MB_SLOT:first").parents("div"), // find parent <div>
    ul = $("<ul></ul>"); // setup <ul> element

parent.prepend( ul ); // add <ul> element as first child in parent

$( ".MB_SLOT" ).appendTo( ul ); // move .MB_SLOT as children of <ul>
$( ".MB_SLOT" ).wrap( "<li></li>" ); // wrap .MB_SLOT in <li>

https://jsfiddle.net/opzLLx9h/

Answer 3

您可以执行以下操作（将div重建为li s）https://jsfiddle.net/rwghggx4/2/

我可能会弄错，但是这个例子“构建”li而不是仅仅将div包裹在li中的原因是因为你不应该放div s li s。

$(document).ready(function() {

    function transformToUL() {
    var html = "<ul>";
    $('.MB_SLOT').each(function() {
    console.log($(this));
        html += "<li class='MB_SLOT' id='" + $(this).attr('id') + "'>" + $(this).text() + "</li>";
    });
    $('.container').append(html);    
    $('.changeToUL').hide();
  }

  transformToUL();
});

jQuery将一系列div标签放入无序列表中

3 个答案: