0

我选择了带有下面确切标记的 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 内的第二个锚点的文本。

干杯。

4

6 回答 6

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

});
于 2013-06-18T19:25:04.550 回答
0

你可以这样做：

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

小提琴

于 2013-06-18T19:23:18.637 回答
0

您可以尝试使用 jQuery 的.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);

请参阅此处的工作示例

于 2013-06-18T19:23:55.683 回答
0

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

演示：http: //jsfiddle.net/ENvNq/1/

于 2013-06-18T19:26:07.903 回答
0 
$('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/

于 2013-06-18T19:28:51.143 回答
0

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

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

jsFiddle 示例

于 2013-06-18T19:48:48.450 回答