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原则，（不要重复自己）我想以编程方式创建Nav按钮，以便在添加，删除或重新排序段时更容易维护页面。使用

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

如何按发生顺序列出给定类的html元素？

2 个答案: