Javascript 使用一组div中的数据创建UL

我选择了一组具有下面确切标记的div，我想在这些div上方创建一个无序列表，为“tab”系统提供基础工作-所有这些都不需要修改下面的标记

    <div id="category_1">
        <h3 class="maintitle">
            <a class="toggle">..</a>
            <a href="#">Cat 1 Title</a>
        </h3>
        <div>
            ...
        </div>
    </div>

    <div id="category_2">
        <h3 class="maintitle">
            <a class="toggle">..</a>
            <a href="#">Cat 2 Title</a>
        </h3>
        <div>
            ...
        </div>
    </div>

    <div id="category_3">
        <h3 class="maintitle">
            <a class="toggle">..</a>
            <a href="#">Cat 3 Title</a>
        </h3>
        <div>
            ...
        </div>
    </div>

...
...
...

我想用jQuery或纯JS创建，如果足够简单的话：

    <ul>
        <li><a href="#" rel="category_1">Cat 1 Title</a></li>
        <li><a href="#" rel="category_2">Cat 2 Title</a></li>
        <li><a href="#" rel="category_3">Cat 3 Title</a></li>
    </ul>

• rel将是div的ID，因此我知道以后要显示/隐藏哪些选项卡
• li项的值将是原始代码H3内第二个锚的文本

---

干杯。

您可以这样做：

$('div[id^="category_"]').each(function(){
    var id = $(this).attr('id');
    var title = $(this).children('h3').find('a').eq(1).text();
    var listItem = $("<li><a href='#'></a></li>");
    listItem.find('a').attr('rel',id).text(title);
    $('ul').append(listItem);
});

$（'div[id^=“category”]”）。每个（函数（）{
var id=$（this.attr（'id'）；
var title=$（this）.children（'h3'）.find（'a'）.eq（1）.text（）；
var listItem=$（“
”）；
listItem.find（'a'）.attr（'rel'，id.）.text（标题）；
$（'ul'）。追加（列表项）；
});

---

您可以尝试使用jQuery的方法。它将用您想要的HTML替换当前的HTML。因此，如果您的div在一个带有名称的包装中，您可以执行以下操作：

$("#wrapperID > div").each(function(i) {
    var li = $("<li />").html($(this).html());
    $(this).replaceWith(li);
});
var ul = $("<ul />", { id: 'wrapperID ' }).html($("#wrapperID ").html());
$("#wrapperID ").replaceWith(ul);

$（“#wrapperID>div”）。每个（函数（i）{
var li=$（“
”）html（$（this.html（））；
$（此）。替换为（li）；
});
var ul=$（“
，{id:'wrapperID'}）.html（$（“#wrapperID”）.html（）；
$（“#wrapperID”）。替换为（ul）；

|或者|如果您希望转换为精确的标记，我再次假设在某种类型的带有ID的包装中的所有div（为了简单起见）：

$（“#wrapperID>div”）。每个（函数（i）{
变量li=$（“
”），
a=$（“
试试这个：

$(function () {
    var $uls = $('<ul/>');
    $('[id^=category]').each(function () { // Provide a container that hold the div as context.

       var anch = $(this).find('h3 a').eq(1).clone(); //clone your anchor the second one in h3
        anch[0].rel = this.id; // set the rel with the id
        $('<li/>').append(anch).appendTo($uls); // append to temp ul

    });
    $('body').append($uls); // Append anywhere you want

});

$（函数（）{
var$uls=$（“
”）；
$（'[id^=category]'）。每个（函数（）{//提供一个容器，将div作为上下文保存。
var anch=$（this.find（'h3a'）.eq（1.clone（）；//克隆您的锚，在h3中克隆第二个锚
anch[0].rel=this.id；//使用id设置rel
$（“
”）.append（anch.appendTo（$uls）；//append to temp ul
});
$（'body'）.append（$uls）；//附加到任何需要的位置
});

如果你不想克隆你的锚，那么你也可以尝试一下

$(function () {
    var $uls = $('<ul/>');
    $('[id^=category]').each(function () {
       $('<li/>').append($('<a/>', {
            href: '#',
            rel: this.id,
            text: $(this).find('h3 a').eq(1).text()
        })).appendTo($uls);
    });
    $('body').append($uls);

});

$（函数（）{
var$uls=$（“
”）；
$（'[id^=category]'）。每个（函数（）{
$（'
'）。追加（$（''{
href:“#”，
雷尔：这个，
text:$（this.find（'h3a'）.eq（1）.text（）
})).附于（$uls）；
});
$（'body'）。追加（$uls）；
});
如果没有jQuery，这将在IE8及以上版本中工作

var divs = document.querySelectorAll("div[id^=category_]");
var ul = divs[0].parentNode.insertBefore(document.createElement("ul"), divs[0]);

for (var i = 0; i < divs.length; i++) {
    ul.appendChild(document.createElement("li"))
      .appendChild(divs[i].querySelector("a[href='#']").cloneNode(true))
      .rel = divs[i].id
}

var divs=document.querySelectorAll（“div[id^=category_u3;]”；
var ul=divs[0].parentNode.insertBefore（document.createElement（“ul”），divs[0]）；
对于（变量i=0；i

演示：

$（'body'）。前置（$（“
”）；
$（'div a[href]'）。每个（函数（）{
var el=$（this.clone（）.attr（'rel'，$（this.clone（'div'）.attr（'id'））
el=$（'
'）。追加（el）；
$（'ul.menu'）。追加（el）；
});

演示
-->
您可以用三行代码（可能更少）完成：

var html=''；
$（'div[id^=“category”]”）。每个（函数（）{html+='
'+$（this.find（'a.toggle'）。next（）.text（）+'
'；}）；
$（“#category_1”）。之前（“
”+html）；

你已经尝试过了吗？你想要创建的标记中没有
。我试图克隆div并去掉我不需要的东西，但有问题，效率不高。我希望有人能建议一种更简单的方法来实现此结果。可能重复
var divs = document.querySelectorAll("div[id^=category_]");
var ul = divs[0].parentNode.insertBefore(document.createElement("ul"), divs[0]);

for (var i = 0; i < divs.length; i++) {
    ul.appendChild(document.createElement("li"))
      .appendChild(divs[i].querySelector("a[href='#']").cloneNode(true))
      .rel = divs[i].id
}

$('body').prepend($("<ul class='menu'>"));

$('div a[href]').each(function () {
    var el = $(this).clone().attr('rel', $(this).closest('div').attr('id'))
    el = $('<li></li>').append(el);
    $('ul.menu').append(el);
});

var html='';
$('div[id^="category"]').each(function () {html += '<li>' + $(this).find('a.toggle').next().text() + '</li>';});
$('#category_1').before('<ul>'+html);