Как я могу добавить элемент списка в порядке с помощью JQuery?

Question

Как я могу добавить элемент списка в порядке с помощью JQuery?

голоса

9

Кто-нибудь знает, как добавить элемент в список, но сделать это так, что это в алфавитном порядке с помощью JQuery? У меня есть следующий код, который просто добавляет элемент из выпадающего списка в конец списка:

$(#projectList).append(
    <li>
    + $(#Projects :selected).text()
    +  <span class='removeProject' projectId=' + $(#Projects).val() + '>Remove</span>
    + </li>
);

но я хотел бы, чтобы иметь возможность вставить его в соответствующем месте, а не просто добавление к концу существующего списка.

Любая помощь очень ценится! Благодаря!

jquery list html-lists

Задан 19/05/2009 в 12:22
источник пользователем Chris Conway

На других языках...

4 ответов

голоса

0

Я не думаю, что есть простой способ с основным JQuery, по крайней мере.

С верхней части моей головы, непроверенный, то просто, как это может работать, если ваш список короткий (так как его O (N))

var liArr=$("#projectList li").get();
var newText=$("#Projects :selected").text();
var newEle=$("<li>"
    + newText
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>"
    + "</li>");
for(var li=0; li<liArr.length; li++) {
  if(newText<liArr[li].innerHTML) {
     $("#projectList").get(0).insertBefore(newEle,liArr[li]);
     newEle=null;
     break;
     } 
  }
if(newEle) { $("#projectList").append(newEle); }

Ответил 19/05/2009 в 12:40
источник пользователем jlarson

голоса

0

Вы можете разобрать список, чтобы увидеть, где следует добавить вашу деталь, а затем использовать функцию JQuery после (), чтобы добавить свой пункт в месте.

Ответил 19/05/2009 в 12:42
источник пользователем Blindy

голоса

1

<script type="text/javascript">
     $(document).ready(function(){
     $("#doctype li:first").before("<li><a href='intranet/library'>All documents</a></li>");
     });
</script>

Ответил 24/09/2010 в 11:47
источник пользователем irshad

Plutor · Accepted Answer · 2009-05-19 12:35

Я думаю, что это будет работать:

var new = $(
    "<li>"
    + $("#Projects :selected").text()
    + " <span class='removeProject' projectId='" + $("#Projects").val() + "'>Remove</span>"
    + "</li>"
);

var firstafteritem = $("#projectList").children().filter( function () {
    return ($(this).text() > $("#Projects :selected").text())
} ).eq(0);

if (firstafteritem.length > 0) firstafteritem.before(new);
else                           $("#projectList").append(new);

Значение firstafteritemбудет первым элементом списка , который имеет текстовое значение после того , как тот , который вы добавляете. (Или никто , если это будет последним.) Тогда , если / иначе будет либо вставить его до этого пункта , или в конце списка.

(Это, конечно, предполагает, что значения вашего списка уже в порядке.)