сортировать блоки
не получается отсортировать блоки по значению в h1. При этом структура не должна меняться по классу class="news".
<button>click</button>
<div id="content">
<div class="news">
<div class="alt">
<h1>1</h1>
<p>Текст1</p>
</div>
<div class="alt">
<h1>3</h1>
<p>Текст3</p>
</div>
<div class="alt">
<h1>3</h1>
<p>Текст3</p>
</div>
</div>
<div class="news">
<div class="alt">
<h1>2</h1>
<p>Текст2</p>
</div>
<div class="alt">
<h1>4</h1>
<p>Текст4</p>
</div>
<div class="alt">
<h1>6</h1>
<p>Текст6</p>
</div>
</div>
<div class="news">
<div class="alt">
<h1>5</h1>
<p>Текст5</p>
</div>
</div>
</div>
<script>
$('button').click(function(){
var $grupp = $('.alt');
$grupp.sort(function (a, b) {
var A = parseInt( $(a).find('h1').text() );
var B = parseInt( $(b).find('h1').text() );
if (A && B) {
return A.toUpperCase().localeCompare(B.toUpperCase());
}
return 0;
});
$grupp.detach().appendTo($grupp);
});
</script>
|
Фридрих,
что должно получиться html? |
рони,
должен сортировать по возрастанию или убыванию блоки <div class="alt"> по значению в <h1> вот так должно получиться:
<div id="content">
<div class="news">
<div class="alt">
<h1>1</h1>
<p>Текст1</p>
</div>
<div class="alt">
<h1>2</h1>
<p>Текст2</p>
</div>
<div class="alt">
<h1>3</h1>
<p>Текст3</p>
</div>
</div>
<div class="news">
<div class="alt">
<h1>3</h1>
<p>Текст3</p>
</div>
<div class="alt">
<h1>4</h1>
<p>Текст4</p>
</div>
<div class="alt">
<h1>5</h1>
<p>Текст5</p>
</div>
</div>
<div class="news">
<div class="alt">
<h1>6</h1>
<p>Текст6</p>
</div>
</div>
</div>
|
Сортировка блоков по содержимому и группировка по три
Фридрих,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.news {
border: 2px solid #191970
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$("button").click(function() {
var $grupp = $.makeArray($(".alt"));
$grupp.sort(function(a, b) {
var A = parseInt($(a).find("h1").text());
var B = parseInt($(b).find("h1").text());
return A - B
});
$.each($grupp, function(indx, el) {
$(el).appendTo($(".news").eq(indx / 3 | 0))
})
})
});
</script>
</head>
<body> <button>click</button>
<div id="content">
<div class="news">
<div class="alt">
<h1>1</h1>
<p>Текст1</p>
</div>
<div class="alt">
<h1>3</h1>
<p>Текст3</p>
</div>
<div class="alt">
<h1>3</h1>
<p>Текст3</p>
</div>
</div>
<div class="news">
<div class="alt">
<h1>2</h1>
<p>Текст2</p>
</div>
<div class="alt">
<h1>4</h1>
<p>Текст4</p>
</div>
<div class="alt">
<h1>6</h1>
<p>Текст6</p>
</div>
</div>
<div class="news">
<div class="alt">
<h1>5</h1>
<p>Текст5</p>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
|
рони, очень элегантно, благодарю!
Сам просмотрел в гугле кучу примеров, и только 3 примера того, что я хочу, но там кода - на целую простынь. Не перестаю удивляться.:) |
| Часовой пояс GMT +3, время: 18:39. |