See Working Example Here

Question

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

    <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中第二个锚的文本。

干杯。

Answer 1

试试这个：

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

});

http://jsfiddle.net/XmarF/

如果你不想克隆你的锚，那么你也可以试试这个......

$(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);

});

Answer 2

你可以这样做：

$('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);
});

Fiddle

Answer 3

您可以尝试使用jQuery＆＃39; .replaceWith()方法。它将用您想要的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);

|或|如果你想要转换为那个确切的标记，我再次假设某些类型的包装器中的所有div都带有ID（为简单起见）：

$("#wrapperID > div").each(function(i) {
    var li = $("<li />"),
        a = $("<a />", { href: "#", rel: $(this).prop("id"), text: $(this).find("a").last().text() }).appendTo(li);
    $(this).replaceWith(li);
});
var ul = $("<ul />", { id: 'wrapperID ' }).html($("#wrapperID ").html());
$("#wrapperID ").replaceWith(ul);

See Working Example Here

Answer 4

没有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
}

DEMO： http://jsfiddle.net/ENvNq/1/

Answer 5

$('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);
});

演示---> http://jsfiddle.net/ht3Y7/

Answer 6

你可以用三行（也许更少）来做：

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

<强> jsFiddle example

使用来自一组div的数据创建UL

6 个答案:

http://jsfiddle.net/XmarF/

See Working Example Here