如何使用jquery更改html标签的顺序答案

【问题标题】：How to change order of html tag by using jquery如何使用jquery更改html标签的顺序
【发布时间】：2012-02-11 13:04:19
【问题描述】：

我想通过使用 jquery 来完成下面的步骤。有谁知道很好的解决方案吗？

获取“ul”元素的DOM对象。

<ul id="rows">
    <li class="row1">
        <a class="row1-1" href="/kensaku2/Page1" title="page1">
        2011/11/16</a>
    </li>
    <li class="row2">
        <a class="row1-2" href="/kensaku2/Page2" title="page2">
        2011/11/15</a>
    </li>
    <li class="row3">
        <a class="row1-3" href="/kensaku2/Page3" title="page3">
        2011/12/21</a>
    </li>
    <li class="row4">
        <a class="row1-4" href="/kensaku2/Page4" title="page4">
        2011/12/05</a>
    </li>
</ul>

查找“a”元素的内容等于“2011/12/21”的“li”元素。（这是 "row3" li 元素。）

将“li”元素移动到头部。（另见下面的代码。）

<ul id="rows">
    <li class="row3">
        <a class="row1-3" href="/kensaku2/Page3" title="page3">
        2011/12/21</a>
    </li>

    <li class="row1">
        <a class="row1-1" href="/kensaku2/Page1" title="page1">
        2011/11/16</a>
    </li>
    <li class="row2">
        <a class="row1-2" href="/kensaku2/Page2" title="page2">
        2011/11/15</a>
    </li>
    <li class="row4">
        <a class="row1-4" href="/kensaku2/Page4" title="page4">
        2011/12/05</a>
    </li>
</ul>

我已经知道如何像这样获取“ul”元素的 DOM 对象了。

    $("#rows").get(0)

但我不知道第 2 步和第 3 步。所以，我想请教专家。

【问题讨论】：

搬家：stackoverflow.com/questions/1279957/…
用于查找包含值的元素：api.jquery.com/contains-selector

标签： jquery

【解决方案1】：

这将选择文本为“2011/12/21”的a 元素并将父li 移动为第一个子元素：

$('#rows a:contains("2011/12/21")').parent().prependTo('#rows');

Demo

【讨论】：

使用:contains 伪选择器的好答案。我相信它比.filter() 更具表现力。
同意，这可能会很好地解决问题。但是，应该指出的是，如果 exact 匹配是 OP 所追求的，这将不会发生。
确实，2011/12/21 BC 也会被捕获，尽管查看示例标记，它似乎坚持 YYYY/MM/DD。
真是难以置信！！有效。非常感谢！我是jquery的初学者。如果你有，请给我另一个解决方案。我想了解更多。

【解决方案2】：

$("#rows li").filter(function() {

    // trimming is needed in this case, it seems
    return $.trim($(this).text()) === "2011/12/21";
}).prependTo("#rows");

Demo.

【讨论】：

@Adam Rackis - 不需要，因为.text() 只会提取纯文本，忽略标记，所以在这种情况下并不重要。
不开玩笑-我不知道...有道理。

【解决方案3】：

$("#rows li a").filter(function(){return $(this).text()=='2011/12/21'})

这将选择所需的值将其移动到您想要的任何位置

【讨论】：

【解决方案4】：

如果您想根据日期进行更多排序，而不仅仅是您描述的单个元素的内容，您可能需要使用像这样的元素排序插件：

http://james.padolsey.com/javascript/sorting-elements-with-jquery/

它将像这样工作（未经测试）：

$('li').sortElements(function(a, b){
    var dateA = parseInt($(a).find('a').text().replace('/', ''), 10);
    var dateB = parseInt($(b).find('a').text().replace('/', ''), 10);

    return dateA <= dateB ? -1 : 1; // you might want to switch this one
});

【讨论】：

【解决方案5】：

你可以这样使用：

$("#rows li a:contains('2011/12/21')").parent().prependTo("#rows");

这将使用选择器找到包含所需文本的<a> 标记，获取其父标记，然后将其添加到#rows 对象。 Preprend 的意思是把它作为一个孩子追加，但是让它成为第一个孩子。

您可以在此处查看演示作品：http://jsfiddle.net/jfriend00/7MRXs/

【讨论】：