日付のテキストとリンクを並べ替えようとしています。この質問Use jQuery to Sort DIV based on Grandchild DIVSの助けを借りて、私は本当に遠くまで行くことができました。現時点では、日付は日付文字列ではなくテキスト文字列として読み取られています。テキストを日付文字列に変換する方法を理解する必要があります。どんな助けでも大歓迎です。
`<script type='text/javascript'>
$(document).ready(function() {
function sortUsingNestedText(parent, childSelector, keySelector, caller) {
var articles;
var items = parent.children(childSelector).sort(function(a, b) {
var vA = $(keySelector, a).text();
var vB = $(keySelector, b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
var articles = $();
items.each(function() {
if ($(this).text().indexOf("articles") != -1) { //if it contains "articles"
articles = articles.add($(this)); //adds to the articles jQuery object
items = items.not($(this)); //and remove from items
}
});
if (caller.data('order_by') == 'asc') {
articles = articles.sort(function(a, b) {
var vA = $(a).text();
var vB = $(b).text();
return (vA < vB) ? -1 : (vA > vB) ? 1 : 0;
});
}
if (caller.data('order_by') == 'desc') { //alert('desc pattern');
caller.data('order_by', 'asc');
parent.append(items.get().reverse());
parent.append(articles.get().reverse());
} else { //alert('asc pattern');
caller.data('order_by', 'desc');
parent.append(articles);
parent.append(items);
}
}
$('#date').data("sortKey", "div.article-preview-date").data('order_by', 'desc');
$('#name').data("sortKey", "div.article-preview").data('order_by', 'desc');
$("#date").click(function() {
$('.article-preview-left-col > .article-preview-date > span').contents().unwrap();
$('.blog-year-month').remove();
sortUsingNestedText($('#sort'), "article", $("#date").data("sortKey"), $(this));
});
$("#name").click(function() {
$('.article-preview-left-col > .article-preview-date > span').contents().unwrap();
$('.blog-year-month').remove();
sortUsingNestedText($('#sort'), "article", $("#name").data("sortKey"), $(this));
});
})
</script>
</head>
<body>
<ul id="date-title-toggle">
<li class="list-alpha" id="date"><a href="#">Date</a></li>
<li class="list-omega" id="name"><a href="#">Title</a></li>
</ul>
<section id="sort">
<span class="blog-year-month">2012</span>
<article class="articles">
<div class="article-preview-left-col">
<div class="article-preview-date"> <span class="month">January</span> <span class="day">10</span> <span class="year">2011</span> </div>
</div>
<div class="article-preview">
<h1><a href="/news/newsroom/news-and-numbers/032012.html">Six in 10 Obese Adults Have Joint Pain</a></h1>
<!--?psx-end-slot ahrqTranslation?-->
</div>
</article>
<article class="articles">
<div class="article-preview-left-col">
<div class="article-preview-date"> <span class="month">January</span> <span class="day">31</span> <span class="year">2010</span> </div>
</div>
<div class="article-preview">
<h1><a href="/news/newsroom/news-and-numbers/012512.html">Hospital Stays Involving C. difficile Infections Leveled Off After 300 Percent Increase Since 1993</a></h1>
<!--?psx-end-slot ahrqTranslation?-->
</div>
</article>
<article class="articles">
<div class="article-preview-left-col">
<div class="article-preview-date"> <span class="month">January</span> <span class="day">30</span> <span class="year">2012</span> </div>
</div>
<div class="article-preview">
<h1><a href="/news/newsroom/news-and-numbers/012512.html">Hospital Stays Involving C. difficile Infections Leveled Off After 300 Percent Increase Since 1993</a></h1>
<!--?psx-end-slot ahrqTranslation?-->
</div>
</article>
<article class="articles">
<div class="article-preview-left-col">
<div class="article-preview-date"> <span class="month">January</span> <span class="day">15</span> <span class="year">2012</span> </div>
</div>
<div class="article-preview">
<h1><a href="/news/newsroom/news-and-numbers/012512.html">Hospital Stays Involving C. difficile Infections Leveled Off After 300 Percent Increase Since 1993</a></h1>
<!--?psx-end-slot ahrqTranslation?-->
</div>
</article>
<article class="articles">
<div class="article-preview-left-col">
<div class="article-preview-date"> <span class="month">January</span> <span class="day">27</span> <span class="year">2012</span> </div>
</div>
<div class="article-preview">
<h1><a href="/news/newsroom/news-and-numbers/011212.html">Most Health Care Costs Incurred by Few Americans</a></h1>
<!--?psx-end-slot ahrqTranslation?-->
</div>
</article>
<article class="articles">
<div class="article-preview-left-col">
<div class="article-preview-date"> <span class="month">January</span> <span class="day">25</span> <span class="year">2012</span> </div>
</div>
<div class="article-preview">
<h1><a href="/news/newsroom/news-and-numbers/030712.html">Hospital Readmission Rates Higher for Chronic Conditions</a></h1>
<!--?psx-end-slot ahrqTranslation?-->
</div>
</article>
`