如何通过jquery更改html标签的顺序

问题描述：

我想通过使用jquery进行以下步骤。有谁知道伟大的解决方案？如何通过jquery更改html标签的顺序

获取“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'。（这是“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 所以，我想问问专家。

搬家：http://stackoverflow.com/ques tions/1279957/jquery-how-to-move-an-element-into-another-element – 2012-01-16 15:57:45

查找包含值的元素：http://api.jquery.com/contains-selector/ – 2012-01-16 15:59:48

答

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

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

Demo

使用'：contains'伪选择器的好答案。我相信它比'.filter（）'更具表现力。 – 2012-01-16 16:05:06

同意，这很可能会很好地解决问题。然而，应该指出的是，如果*精确*匹配是OP之后的话，这将不会执行。 – karim79 2012-01-16 16:06:38

事实上，'2011/12/21 BC'也会受到追捧，虽然看样本标记，看起来它坚持YYYY/MM/DD。 – 2012-01-16 16:15:26

答

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

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

Demo.

+1，但我认为你想$（this）.find（“a”）。text（）=== – 2012-01-16 16:00:32

@Adam Rackis - 没有必要，因为'.text（）'只会提取纯文本，忽略标记，所以它不会在这种情况下真的很重要。 – karim79 2012-01-16 16:01:20

没有开玩笑 - 我不知道这是有道理的。 – 2012-01-16 16:04:23

答

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

这将选择所需的值移动它在任何你想

答

您可以使用这样的事情：

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

这将使用选择找到<a>标签包含所需的文本，得到其母公司，然后前置一个到#rows对象。 Preprend意味着将它作为一个孩子追加，但是让它成为第一个孩子。

你可以看到一个演示在这里工作：http://jsfiddle.net/jfriend00/7MRXs/

谢谢你的解释！ – 2012-01-16 16:28:29

答

如果你想要做的更多的是基于日期，而不是只有你描述单个元素的内容排序，你可能想使用排序插件的元素等这一个：

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 
});

我会检查它。谢谢！ – 2012-01-16 16:25:53

如何通过jquery更改html标签的顺序

相关推荐