Упорядочить список ul по содержанию span - PullRequest
Новая
       22

Упорядочить список ul по содержанию span

2 голосов
/ 23 декабря 2011

Я действительно заблудился, пытаясь упорядочить список ul по диапазону в li.

У меня есть следующая структура 

<ul id="videosList">
  <li class="response1">
    <a href="link"><img src="moon" /><span>Alex breaking bad</span>
      <li>
        <li class="response1">
          <a href="link"><img src="moon" /><span>Jason playing piano</span>
            <li>
              <li class="response1">
                <a href="link"><img src="moon" /><span>Jenny skying</span>
                  <li>
                    <li class="response1">
                      <a href="link"><img src="moon" /><span>Chuck norris</span>
                        <li>
                          <li class="response1">
                            <a href="link"><img src="moon" /><span>Zyxwaa</span>
                              <li>
                                <li class="response1">
                                  <a href="link"><img src="moon" /><span>Realtek</span>
                                    <li>

                                      <li class="response2">
                                        <a href="link"><img src="moon" /><span>Bad alex breaking</span>
                                          <li>
                                            <li class="response2">
                                              <a href="link"><img src="moon" /><span>Piano playing Jason</span>
                                                <li>
                                                  <li class="response2">
                                                    <a href="link"><img src="moon" /><span>Skying Jenny</span>
                                                      <li>
                                                        <li class="response2">
                                                          <a href="link"><img src="moon" /><span>Norris chuck</span>
                                                            <li>
                                                              <li class="response2">
                                                                <a href="link"><img src="moon" /><span>Intel</span>
                                                                  <li>
</ul>

У меня есть этот список, сгенерированный из нескольких загруженных видео и разделенный, потому что respnse1 приносит видео из базы данных X, а ответ - видео из базы данных Y. Я хочу упорядочить список по содержанию SPAN в LI.

Я попробовал несколько вещей из Google и Stack Overflow, но я не смог приспособить 1 к тому, что мне нужно.

Итак, как мне упорядочить список с помощью JavaScript / jQuery по содержимому SPAN в LI?

Ответы [ 2 ]

2 голосов
/ 23 декабря 2011

работает! ... 

var list = $("ul#videosList");
var desc= false;
list.append(list.children().get().sort(function(a, b) {
    var aProp = $(a).find("span").text(),
        bProp = $(b).find("span").text();
    return (aProp > bProp ? 1 : aProp < bProp ? -1 : 0) * (desc ? -1 : 1);
}));
0 голосов
/ 23 декабря 2011

Если вы используете jQuery, обратитесь к этому расширению , которое поможет вам сортировать элементы DOM с помощью специальной функции сравнения.Это работает так: 

$('#videosList').sortElements(function(a, b){
  return $(a).text() > $(b).text() ? 1 : -1;
});

Затем элементы списка сортируются по алфавиту по заголовкам.

...