jquery - 如何按出现顺序列出给定类的html元素？

Question

我有一个结构如下的单页 html 文件：

<div id="foo" class="segment">
    Foo content
</div>
 <div id="bar" class="segment">
    Bar content
</div>
... etc ...

我想使用 jQuery 创建一个带有相同顺序按钮的导航栏，例如

<button id="Navfoo" class="nav">Foo</button>
<button id="Navbar" class="nav">Bar</button>

作为 DRY 原则的忠实信徒，（不要重复自己）我想以编程方式创建导航按钮，以便在添加、删除或重新排序段时更容易维护页面。在段 div 上获取迭代器很容易

$(".segment")

但是如何确保迭代与页面上元素出现的顺序相同？

Answer 1

$(".segment").each(function(){
    // create nav items
});

使用此方法，它将遵循 DOM 顺序

Answer 2

阅读 .segments 并构建您的按钮，如下所示：http: //jsfiddle.net/U6MHA/

<div id="foo" class="segment">
    Foo content
</div>
 <div id="bar" class="segment">
    Bar content
</div>
<div id="result" />


var segments = $('.segment');
var buttons = $.map(segments, function(a)
                    { 
                        var id = $(a).attr('id');
                        return '<button id="' + id + '" class="nav">' + id + '</button>'; 
                    }).join('<br />');

segments.detach();
$('#result').html(buttons);