如何使用jquery更改HTML标记的顺序

How to change order of html tag by using jquery

我想使用jquery执行下面的步骤。有人知道很好的解决办法吗？

获取"ul"元素的dom对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

找到"li"元素，其中"a"元素的内容等于"2011/12/21"。(这是"row3"li元素。)

把"里"元素移到头上。(也见贝娄代码)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

我已经知道如何得到这样的"ul"元素的dom对象。

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

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

相关讨论

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

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

演示

相关讨论

1
2
3
4
5

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

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

演示。

相关讨论

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

这将选择所需的值，将其移动到所需的任何位置。

如果您希望根据日期进行更多排序，而不仅仅是根据您描述的单个元素的内容进行排序，那么您可能希望使用类似于此的元素排序插件：

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

它将像这样工作(未测试)：

1
2
3
4
5
6

$('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
});

相关讨论

您可以使用如下内容：

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

这将使用选择器查找包含所需文本的标记，获取其父标记，然后将其前置到rows对象。preprend的意思是把它附加为一个孩子，但要使它成为第一个孩子。

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

相关讨论