Как отсортировать по id в дочернем элементе списка в jquery
Чрезвычайно новичок в коде и только действительно пробует основы.
Мне нужно упорядочить этот список по дате выпуска, выбрав класс (.date) дочернего элемента, а затем используя идентификатор для сортировки. имея в виду, что идентификатор li используется для сортировки по чему-то другому. Я просто не могу понять, как выбрать класс ребенка и отсортировать его по идентификатору.
Вот разметка:
<button id = "datereleased">Date Released</button>
<div id = "sortcontainer">
<li id = "60">
<h2>Some game</h2>
<h2 class = "date" id = "2015">(2015)</h2>
<h3>45/100</h3>
</li>
<li id = "45">
<h2>Some game</h2>
<h2 class = "date" id = "2017">(2017)</h2>
<h3>45/100</h3>
</li>
<li id = "80">
<h2>Some game</h2>
<h2 class = "date" id = "2013">(2013)</h2>
<h3>45/100</h3>
</li>
</div>
и что у меня есть до сих пор:
$(document).ready(function() {
$( "#datereleased" ).click(function(){
var lis = $('#sortcontainer').children('li').remove();
lis.sort(function(a, b) {
return parseInt($('.date > id', a)) > parseInt($('.date > id', b));
});
$('#sortcontainer').append(lis);
});
});
Заранее спасибо, если у кого-нибудь есть информация
Если вы новичок, вам не следует использовать jQuery. Вам следует изучить собственный API, чтобы понять, как работает DOM. В какой-то момент вы, вероятно, поймете, что все те сообщения в блогах от 2011 года, в которых говорилось, что вам нужно использовать jQuery, на самом деле просто больше не актуальны.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Получение атрибута id от даты для сортировки.
$('#datereleased').on('click', function(){
var $sortContainer = $('#sortcontainer');
$sortContainer.append(
$sortContainer.children().sort(function(a, b){
return (
parseInt($('.date', a).attr('id'), 10)
-
parseInt($('.date', b).attr('id'), 10)
);
}).get()
);
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id = "datereleased">Date Released</button>
<div id = "sortcontainer">
<li id = "60">
<h2>Some game</h2>
<h2 class = "date" id = "2015">(2015)</h2>
<h3>45/100</h3>
</li>
<li id = "45">
<h2>Some game</h2>
<h2 class = "date" id = "2017">(2017)</h2>
<h3>45/100</h3>
</li>
<li id = "80">
<h2>Some game</h2>
<h2 class = "date" id = "2013">(2013)</h2>
<h3>45/100</h3>
</li>
</div>Спасибо, это сработало очарование. Я понимаю, что символ '>' выбирал дочерние элементы. поэтому попробуйте выбрать дочерний элемент класса даты. Могу я спросить, для чего нужен, 10 после attr ('id')? ваше здоровье
10 - это база, по которой работает синтаксический анализ. Таким образом, вы можете при желании проанализировать строку в различных форматах, например 16, проанализировать строку, содержащую шестнадцатеричное значение. Я считаю, что по умолчанию установлено 10, но я всегда делаю это для ясности.
Вам нужно исправить свой селектор, чтобы настроить таргетинг на элементы h2, которые имеют класс date с id, вместо таргетинга на элементы с тегом с именем id.
Затем вы можете отсортировать это, выполнив вычитание значений атрибутов id и добавив предков li.
В этом примере не используется jQuery, а используется более новый синтаксис, например функции стрелок:
document.addEventListener("DOMContentLoaded", function() {
document.querySelector("#datereleased").addEventListener("click", function() {
var sc = document.querySelector("#sortcontainer");
Array.from(sc.querySelectorAll('li > .date[id]'))
.sort((a, b) => a.id - b.id)
.forEach(el => sc.appendChild(el.closest("li")));
});
});<button id = "datereleased">Date Released</button>
<div id = "sortcontainer">
<li id = "60">
<h2>Some game</h2>
<h2 class = "date" id = "2015">(2015)</h2>
<h3>45/100</h3>
</li>
<li id = "45">
<h2>Some game</h2>
<h2 class = "date" id = "2017">(2017)</h2>
<h3>45/100</h3>
</li>
<li id = "80">
<h2>Some game</h2>
<h2 class = "date" id = "2013">(2013)</h2>
<h3>45/100</h3>
</li>
</div>
$('.date > id', a)Эээ, эта деталь для> idвыглядит неправильно. В элементах даты есть идентификатор. Вы пытаетесь это получить? Потому что это не дочерний элемент. Если так то вроде бы$('.date', a).prop('id')