Question

我正在尝试将此HTML设置为基于h3标头自动排序。我正在使用一个名为SIS Accordion的WordPress插件，客户希望将他创建的手风琴列表按字母顺序排序，而无需在管理区域进行任何调整。目前，他必须更改已发布的手风琴帖子的日期以更改排序。插件支持区域没有回答我关于自动排序的问题。所以我希望这个社区可能有一个使用jquery的建议。

在下面的示例中，“第一行”应自动排序以显示第一行，“最后一行”重新排序，使其低于此值，“非常最后一行”在页面加载时降至最低点。

HTML

<div id="accordion">
<h3>Last Line</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis arcu non turpis consectetur faucibus quis ut velit. Mauris semper augue in tellus suscipit, at dictum quam congue.</div>
<h3>Very Last Line</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis arcu non turpis consectetur faucibus quis ut velit. Mauris semper augue in tellus suscipit, at dictum quam congue.
</div>
<h3>First Line</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis arcu non turpis consectetur faucibus quis ut velit. Mauris semper augue in tellus suscipit, at dictum quam congue.
</div>
</div>

JQUERY

$(function() {
        $("#accordion")
        .accordion({
            header: "> h3",
            autoHeight: false,
            collapsible: true,
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            sorting: true,
            stop: function() {
                stop = true;
            }
        });

});

请参阅下面的代码示例。感谢您的任何帮助，您可以提供。 http://jsfiddle.net/Cascus2/dh2qpm0p/

吉姆

Answer 1

我不知道它是否效率最高，但对它们进行排序并不难。由于每个条目都是一对兄弟姐妹（h3和div跟随它），而不是在一个容器中，这有点复杂。

但这似乎有效（无论你是在调用手风琴插件之前还是之后都这样做了）：Updated Fiddle

$(function() {
    var accordion = $("#accordion");

    // Get an array of jQuery objects containing each h3 and the div that
    // follows it
    var entries = $.map(accordion.children("h3").get(), function(entry) {
        var $entry = $(entry);
        return $entry.add($entry.next());
    });

    // Sort the array by the h3's text
    entries.sort(function(a, b) {
        return a.filter("h3").text().localeCompare(b.filter("h3").text());
    });

    // Put them in the right order in the container
    $.each(entries, function() {
        this.detach().appendTo(accordion);
    });


    accordion
        .accordion({
            header: "> h3",
            autoHeight: false,
            collapsible: true,
            active: false
        })
        .sortable({
            axis: "y",
            handle: "h3",
            sorting: true,
            stop: function() {
                stop = true;
            }
        });
});

如果你动态更改手风琴，你需要重复排序，或者（更好）添加时一定要插入正确的位置。

如何在h3标签字符串上按字母顺序进行手风琴自动排序？

1 个答案: