Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.03.2012, 22:36
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Удаление элемента в "жидком" листе.
Для начала обьясню, под чем я понимаю "текучий" (или "жидкий") лист.
( лист от слова List )

это такой объект, имеющий свои свойства и методы, как все объекты, но вдобавок и пронумерованные свойства и свойство length, равное длине пронумерованных элементов.

представить его можно как-то так :

var fluid = {
     myProp : "okay",
     myMethod : function(){ alert('myMethod!') },

     "0" : "null",
     "1" : "one",
     "2" : "two",
     "3" : "three",
     
     length : 4
};


Отличается он от массива тем, что при удалении пронумерованного свойства его длина автоматически уменьшается на 1, а пронумерованные элементы, идущие за удаленным элементом, уменьшают свои индексы на 1.

delete fluid["1"];

/*
fluid is
 {
     myProp : "okay",
     myMethod : function(){ alert('myMethod!') },

     "0" : "null",
     "1" : "two",
     "2" : "three",
     
     length : 3
};
*/

delete fluid["1"];

/*
fluid is
 {
     myProp : "okay",
     myMethod : function(){ alert('myMethod!') },

     "0" : "null",
     "1" : "three",
     
     length : 2
};
*/

Проблема состоит в том, чтобы запоминать индексы определённых пронумерованных элементов и удалять их при необходимости.

Конечно, это было бы легко, если бы они не смещались вверх. Так вот, мне нужен алгоритм, при котором можно будет удалить такой-то пронумерованный элемент.

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

Вот запускаемый пример
Пример: не успевает. откройте на локале
<div>Hello World !</div>

<script>
var dummy = document.querySelector('div');
var stylesheet = document.head.appendChild(document.createElement('style')).sheet;
var rules = stylesheet.cssRules; // <- тот самый жидкий массив

// вставляем правила, запоминаем индексы...
var first = stylesheet.insertRule("div { border:1px red solid; }", rules.length);
var second = stylesheet.insertRule("div { padding:10px; }", rules.length);
var thirst = stylesheet.insertRule("div { color:green; }", rules.length);

// отображаем результаты в консоли
console.dir(rules);

 // запомненные индексы
 console.log(first, second, thirst);

// пережидаем ленивую отрисовку.
setTimeout(function(){

     // убираем первое правило.
     stylesheet.deleteRule(first);
     
     // и смотрим на правила
     console.dir(rules);

}, 3000);
</script>


Вот-с. Итак, как удалить правило-то ?

Последний раз редактировалось melky, 22.03.2012 в 22:38.
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2012, 14:26
Лаборант :-)
Отправить личное сообщение для Pavel M. Посмотреть профиль Найти все сообщения от Pavel M.
 
Регистрация: 08.11.2011
Сообщений: 806

не совсем понятно, вы про объект таблицы стилей или про то как сделать свой объект с аналогичной функциональностью?
Ответить с цитированием
  #3 (permalink)  
Старый 23.03.2012, 15:56
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от melky
delete fluid["1"];
может просто splice'ом удалять?
Ответить с цитированием
  #4 (permalink)  
Старый 23.03.2012, 19:15
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

я про объект таблицы стилей.

..

удалять сплайсом ?
Ответить с цитированием
  #5 (permalink)  
Старый 23.03.2012, 19:27
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

melky,
а если структуру поменять? вместо свойств просто массив и методы работающие с массивом-добавление,удаление с массива прочие операции...
Ответить с цитированием
  #6 (permalink)  
Старый 23.03.2012, 20:34
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

Сообщение от melky
удалять сплайсом ?
только если массив
Ответить с цитированием
  #7 (permalink)  
Старый 23.03.2012, 20:40
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Да и с обычным объектом прокатит, индексы сдвинет, остальные свойства не тронет, единственное, что свойство length обязательно должно присутствовать, но если добавлять, как в jQuery, с помощью [].put.call(obj, el), то проблем не будет.

Последний раз редактировалось Octane, 23.03.2012 в 20:44.
Ответить с цитированием
  #8 (permalink)  
Старый 24.03.2012, 02:20
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Octane, вероятно, я плохо объяснил, в чём проблема, Вы меня не поняли.

Сообщение от dmitriymar Посмотреть сообщение
melky,
а если структуру поменять? вместо свойств просто массив и методы работающие с массивом-добавление,удаление с массива прочие операции...
как правила в таблице превратить в массив и работать с ними в таком виде ?

вся проблема целиком и полностью относится к правилам стилей.

я подумал, как сюда можно замешать массивы ... и тут я вспомнил отличный метод у массива ...

var fluid = [  1,2, { 'obj?!' : 'suddenly!' } ,4,5,6,7,8, { 'obj is here' : 'again' } ,10  ];

var obj = { 'this is' : 'my sample obj' };

fluid.push(obj);

// перемешиваем.
var i = fluid.length, b, c;
do { b = Math.floor(Math.random()*--i); c = fluid[b]; fluid[b] = fluid[i]; fluid[i] = c; } while(i);

console.log( fluid );

// и ищем индекс obj в массиве fluid.. EASE WAY
*!*
var index = fluid.indexOf( obj );
*/!*

console.log( index, fluid[ index ]  );


как я мог забыть про него ??

попробую теперь на правилах :


<div>Hello World !</div>

<script>
var dummy = document.querySelector('div'),
     stylesheet = document.head.appendChild(document.createElement('style')).sheet,
     rules = stylesheet.cssRules;

// намешаем правил
stylesheet.insertRule("div { margin:10px; }", rules.length);
stylesheet.insertRule("div { font-size:2em; }", rules.length);

// вернёт индекс добавленного правила
var first = stylesheet.insertRule("div { border:10px red solid; }", rules.length);

stylesheet.insertRule("body { padding:90px; }", rules.length);
stylesheet.insertRule("html { pading:10px; }", rules.length);

// и тут тоже индекс.
var second = stylesheet.insertRule("div { color:green; }", rules.length);


// превращаем индексы в сами правила
first = rules[ first ];
second = rules[ second ];

// удалим пару правил. тут я делаю это наугад, чтобы сместились индексы запомненных правил
stylesheet.deleteRule(  3  );
stylesheet.deleteRule(  0  );

// а теперь я их точно удаляю; таймаут для наглядности
setTimeout(function(){

     var first_index = [].indexOf.call( rules, first );
     stylesheet.deleteRule(first_index);

     // т.к. они смещаются вверх, то индекс надо определять прямо перед удалением.

     var second_index = [].indexOf.call( rules, second );
     stylesheet.deleteRule(second_index);

}, 1000);
</script>



Отлично! Problem solved.
Проверил в IE 9, FF 10, O 11.61, CH 17.0.963.83m

как всегда, выручает заимствование методов.

PS. работа в IE<=9 (<10) не нужна, т.к. они не поддерживают переходы и анимации на CSS.
PSS. само собой, такого говнокода у меня не бывает. Всё это было написано супер подробно и супер развёрнуто - чтобы хорошо читалось.

Последний раз редактировалось melky, 24.03.2012 в 02:33.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Удаление элемента из HTML-списка Kostyk92 Элементы интерфейса 1 06.02.2012 23:00
удаление элемента dom Catherine Events/DOM/Window 0 28.10.2011 23:35
Удаление элемента др. скрипта fastdeath Events/DOM/Window 5 28.12.2010 12:32
Массивы удаление элемента и вставка на его место другого mycoding Общие вопросы Javascript 1 19.04.2010 22:30
Удаление отдельного элемента с масива Suharik Общие вопросы Javascript 8 06.04.2010 17:11