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 内の 2 番目のアンカーのテキストになります。

乾杯。

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

次のようなことができます。

$('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 に答える