Форум

Фридрих · #1 (**permalink**) 02.11.2015, 17:10

не получается отсортировать блоки по значению в 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>

рони · #2 (**permalink**) 02.11.2015, 17:44

Фридрих,
что должно получиться html?

Фридрих · #3 (**permalink**) 02.11.2015, 18:01

рони,
должен сортировать по возрастанию или убыванию блоки <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>

рони · #4 (**permalink**) 02.11.2015, 18:37

Фридрих,

<!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>

Фридрих · #5 (**permalink**) 02.11.2015, 18:46

рони, очень элегантно, благодарю!
Сам просмотрел в гугле кучу примеров, и только 3 примера того, что я хочу, но там кода - на целую простынь. Не перестаю удивляться.

Форум

Справочник

Discord чат

Курсы javascript