Сортировка, обьединение елементов по классу
Здравствуйте. Есть такой код разметки с использованием 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> |
Perepelenok,
можно class переделать на data-year="2018"? |
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>
|
Спасибо тебе огромное!Это то что мне нужно!Единственный вопрос еще - как сделать сортировку по годам от большего к меньшему (2018, 2017 к примеру) ?
|
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>
|
Есть проблема - я не указал сразу, но у меня есть табы, в которых выводятся свои списки страниц с определенной категории (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>
|
Можно вписать имя или $id категории в class таба и елемента списка, к примеру и тогда что то придумать...
|
Perepelenok,
не понимаю |
Perepelenok,
сделайте минимальный пример вашей структуры |
Вот такой код у меня сейчас...
<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>
|
| Часовой пояс GMT +3, время: 15:38. |