Форум

Professor · #1 (**permalink**) 10.11.2010, 21:15

Необходимо при нажатии на кнопку отсортировать все объекты по имени(допустим имя будет храниться в каком либо атрибуте вложенного в LI объекта).
Но нужного метода не нашел. Возможно ли это реализовать методами данного плагина?

Или хотя бы как программно(в смысле не двигая мышкой) менять положения блоков <li> в объекте <ul>? Принимаются советы и без использования Jquery.

Заранее спасибо.

ksa · #2 (**permalink**) 11.11.2010, 09:48

Сообщение от Professor

Принимаются советы и без использования Jquery.

Тогда т.с. для затравки...

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function fnSwap(){
   oList.children(0).swapNode(oList.children(1));
}
</script>
</head>
<body>
<UL ID = oList>
  <LI>List Item 1
  <LI>List Item 2
  <LI>List Item 3
  <LI>List Item 4
</UL>
<INPUT TYPE = 'button' VALUE = "Swap List" onclick = "fnSwap()">
</body>
</html>

ksa · #3 (**permalink**) 11.11.2010, 09:55

млин... ИЕ онли...

ksa · #4 (**permalink**) 11.11.2010, 10:55

Вот так...

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function Sort() {
	var o=document.getElementById('oList')
	var ol=o.getElementsByTagName('li')
	var i
	var move
	do {
		move=false
		for (i=0; i<ol.length-1; i++) {
			if (ol[i].innerHTML>ol[i+1].innerHTML) {
				o.appendChild(ol[i])
				move=true
			}
		}
	} while (move)
}
</script>
</head>
<body>
<UL ID = 'oList'>
  <LI>List Item 2</LI>
  <LI>List Item 4</LI>
  <LI>List Item 1</LI>
  <LI>List Item 3</LI>
</UL>
<INPUT TYPE = 'button' VALUE = "Sort List" onclick = "Sort()">
</body>
</html>

рони · #5 (**permalink**) 11.11.2010, 12:02

ещё вариант...сортировка вынесена в отдельную функцию, поэтому условия сортировки можно легко менять, в данном случае корректно отсортирует List Item больше 9

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function Sort() {
    var f = document.getElementById("oList"),
        b = f.getElementsByTagName("li"),
        a, c = [];
    for (a = 0; a < b.length; a++) c[a] = b[a];
    c.sort(function (d, e) {
        d = +d.innerHTML.replace(/.*?(\d+).*?/, "$1");
        e = +e.innerHTML.replace(/.*?(\d+).*?/, "$1");
        return d - e
    });
    for (a = 0; a < b.length; a++) f.appendChild(c[a])
};
</script>
</head>
<body>
<UL ID = 'oList'>
  <LI>List Item 2</LI>
  <LI>List Item 33</LI>
  <LI>List Item 1</LI>
  <LI>List Item 4</LI>
</UL>
<INPUT TYPE = 'button' VALUE = "Sort List" onclick = "Sort()">
</body>
</html>

Professor · #6 (**permalink**) 11.11.2010, 16:17

Спасибо большое за варианты!
Воспользовавшись ими и еще 1 темой с этого форума получилось нечто такое.

$("#rrr").toggle(function(){
//здесь хранятся объекты
        var trs = new Array();
//Здесь хранится список названий объектов
        var seq = new Array();
        var i = 0;
        $("ul#sortable li").each(function() {
            seq[i]=$("ul#sortable li:eq(" + i + ") .name").html();
            trs[seq[i]] = $("ul#sortable li:eq(" + i + ")");
            i ++;
        });

//сортируем список названий объектов
        seq.sort()

        var o=seq.length;
        for (a = -1; a < seq.length; a++){
            var tr=trs[seq[o]]
            if (typeof(tr) != 'undefined') {
                tr.insertAfter($("ul#sortable li:eq(" + a + ")"));
            }
            o--;
        }

        return false;
    },
    function(){
        var trs = new Array();
        var seq = new Array();
        var i = 0;
        $("ul#sortable li").each(function() {
            seq[i]=$("ul#sortable li:eq(" + i + ") .name").html();
            trs[seq[i]] = $("ul#sortable li:eq(" + i + ")");
            i ++;
        });

        seq.sort()
        var o=0;
        for (a = -1; a < seq.length-1; a++){
            var tr=trs[seq[0]]
            if (typeof(tr) != 'undefined') {
                tr.insertAfter($("ul#sortable li:eq(" + a + ")"));
            }
            o++
        }

        return false;

    });

И того должна получиться сортировка по возрастанию и убыванию.
Но почему то исчезает самый маленький элемент.
Я думаю что он просто не вставляется здесь tr.insertAfter($("ul#sortable li:eq(" + a + ")"));

Но как я не мучался, ничего не получается. Может вы подскажете что я не так делаю?

Форум

Справочник

Discord чат

Курсы javascript