Форум

Perepelenok · #1 (**permalink**) 22.11.2018, 21:50

Здравствуйте. Есть такой код разметки с использованием PHP(сайт на вордпресс)

<span class="<?php the_field('year');?>">
<a href="<?php the_permalink(); ?>">
	<?php the_field('year');?> 
	|
	<strong><?php the_title()?></strong>
	/
	<?php if( have_rows('quick-info') ): while( have_rows('quick-info') ): the_row(); ?>
	<?php echo get_sub_field('location'); ?>
	<?php endwhile; endif ?>
	<br>
</a>
</span>

С инициализацией Php код будет таким :

<span class="2018">
<a href="https:/url.com">
	2018
	|
	<strong>Название</strong>
	/
	Москва, Россия
	<br>
</a>
</span>
<span class="2018">
<a href="https:/url.com">
	2018
	|
	<strong>Название</strong>
	/
	Санкт-Петербург, Россия
	<br>
</a>
</span>
<span class="2017">
<a href="https:/url.com">
	2017
	|
	<strong>Название</strong>
	/
	Москва, Россия
	<br>
</a>
</span>

Нужно чтоб елементы с одинаковым годом(классом) обьеденялись в <p>. Проблема в том что изначально года не известны, тоесть могут быть 2018 могут быть 1992 и они будут пополняться.

Вот как мне нужно :

<p>
<span class="2018">
<a href="https:/url.com">
	2018
	|
	<strong>Название</strong>
	/
	Москва, Россия
	<br>
</a>
</span>
<span class="2018">
<a href="https:/url.com">
	2018
	|
	<strong>Название</strong>
	/
	Санкт-Петербург, Россия
	<br>
</a>
</span>
</p>
<p>
<span class="2017">
<a href="https:/url.com">
	2017
	|
	<strong>Название</strong>
	/
	Москва, Россия
	<br>
</a>
</span>
</p>

рони · #2 (**permalink**) 22.11.2018, 22:23

Perepelenok,
можно class переделать на data-year="2018"?

рони · #3 (**permalink**) 22.11.2018, 22:52

Perepelenok,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  p {
      border: #FF0000 1px solid;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var obj = {};
    $("[data-year]").each(function() {
        var el = $(this),
            year = $(this).data("year"),
            p = obj[year];
        if (p) el.appendTo(p);
        else obj[year] = el.wrap("<p/>").parent()
    })
});
  </script>
</head>

<body>
<span data-year="2018">
<a href="https:/url.com">
	2018
	|
	<strong>Название</strong>
	/
	Москва, Россия
	<br>
</a>
</span>
<span data-year="2018">
<a href="https:/url.com">
	2018
	|
	<strong>Название</strong>
	/
	Санкт-Петербург, Россия
	<br>
</a>
</span>
<span data-year="2017">
<a href="https:/url.com">
	2017
	|
	<strong>Название</strong>
	/
	Москва, Россия
	<br>
</a>
</span>

</body>
</html>

Perepelenok · #4 (**permalink**) 22.11.2018, 23:33

Спасибо тебе огромное!Это то что мне нужно!Единственный вопрос еще - как сделать сортировку по годам от большего к меньшему (2018, 2017 к примеру) ?

рони · #5 (**permalink**) 22.11.2018, 23:53

Perepelenok,
лучше если будет общий блок!

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  p {
      border: #FF0000 1px solid;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
    var obj = {}, parent = $(".content");
    $("[data-year]").each(function() {
        var el = $(this),
            year = $(this).data("year"),
            p = obj[year];
        if (p) el.appendTo(p);
        else obj[year] = el.wrap("<p/>").parent()
    })
    Object.keys(obj).sort(function(a,b) {
   return b - a
   }).forEach(function(year) {
   obj[year].appendTo(parent)
   })
});
  </script>
</head>

<body>
<div class="content">
<span data-year="2018">
<a href="https:/url.com">
    2018
    |
    <strong>Название</strong>
    /
    Москва, Россия
    <br>
</a>
</span>
<span data-year="2016">
<a href="https:/url.com">
    2016
    |
    <strong>Название</strong>
    /
    Санкт-Петербург, Россия
    <br>
</a>
</span>
<span data-year="2017">
<a href="https:/url.com">
    2017
    |
    <strong>Название</strong>
    /
    Москва, Россия
    <br>
</a>
</span>
</div>
</body>
</html>

Perepelenok · #6 (**permalink**) 22.11.2018, 23:58

Есть проблема - я не указал сразу, но у меня есть табы, в которых выводятся свои списки страниц с определенной категории (cat 1, cat 2, cat3) и если в 1 табе и во 2 есть data-year="2018", то елемент со 2 таба переходит в 1 и обьеденятся с этим елементом из последнего таба.

Тоесть у меня код выглядет так...

<div class="right-wrap tab_container">
     <article id="tab1" class="tab_content">
        Тут выводится список из категории "cat 1".
 </article>
      <article id="tab2" class="tab_content">
                Тут выводится список из категории "cat 2".
      </article>
      <article id="tab3" class="tab_content">
Тут выводится список из категории "cat 3".
                    </article>
    </div>

Perepelenok · #7 (**permalink**) 22.11.2018, 23:59

Можно вписать имя или $id категории в class таба и елемента списка, к примеру и тогда что то придумать...

рони · #8 (**permalink**) 23.11.2018, 00:02

Perepelenok,
не понимаю

рони · #9 (**permalink**) 23.11.2018, 00:06

Perepelenok,
сделайте минимальный пример вашей структуры

Perepelenok · #10 (**permalink**) 23.11.2018, 00:11

Вот такой код у меня сейчас...

<script>
$(function() {
    var obj = {};
    $("[data-year]").each(function() {
        var el = $(this),
            year = $(this).data("year"),
            p = obj[year];
        if (p) el.appendTo(p);
        else obj[year] = el.wrap("<p/>").parent()
    })
});

  </script>
<div class="content" id="pj_cycle">
  <div class="middle-wrap two-side-wrap" id="wrap">
    <div class="left-wrap" style="width: 100px;">
      <span>
        <h3>
          <?php $title = the_title(); ?>
        </h3>
        <ul class="hor-tabs">
            <li class="active" rel="tab1">1 Таб</li>
            <li rel="tab2">2 Таб</li>
            <li rel="tab3">3 Таб</li>
        </ul>
      </span>
    </div>
    <div class="right-wrap tab_container">
     <article id="tab1" class="tab_content">
<span data-year="2018">
<a href="https:/url.com">
    2018
    |
    <strong>Название</strong>
    /
    Москва, Россия
    <br>
</a>
</span>
<span data-year="2016">
<a href="https:/url.com">
    2016
    |
    <strong>Название</strong>
    /
    Санкт-Петербург, Россия
    <br>
</a>
</span>
</article>
<article id="tab2" class="tab_content">
<span data-year="2018">
<a href="https:/url.com">
    2017
    |
    <strong>Название</strong>
    /
    Москва, Россия
    <br>
</a>
</span>
</article>
<article id="tab3" class="tab_content">
<span data-year="2018">
<a href="https:/url.com">
    2017
    |
    <strong>Название</strong>
    /
    Москва, Россия
    <br>
</a>
</span>
</article>
    </div>
  </div>
</div>

Форум

Справочник

Discord чат

Курсы javascript