Сопоставление элемента с содержимым, если не найдено, добавить его.

[[PRO]M4KC]

Хорошо. У меня есть два неупорядоченных списка. Элементы списка в каждом списке либо активны, либо деактивированы (один список для активных элементов и один для деактивированных). Пользователь, имеющий доступ, может нажать кнопку деактивации/повторной активации в каждом элементе списка и переместить элемент в другой список. Все это работает, без проблем.

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

Еще не запутались? Позвольте мне попытаться показать, что я имею в виду:

Активные элементы:

<ul id="inactivelements">
</ul>

Код (разметка): Неактивные элементы:
<ul id="activelements"> <li class="heading">This is a heading</li> <li>This is an active element</li> <li>This is another active element</li> <li class="heading">This is another heading</li> <li>This is yet another active element</li> </ul>
Код (разметка): Здесь нет элементов, поскольку ни один из них еще не деактивирован.

Если я деактивирую второй элемент под первым заголовком в #activelements, я хочу, чтобы заголовок «Это заголовок» появился и был вставлен перед элементом списка в списке деактивированных элементов. Это работает.

Однако, если я деактивирую другой элемент в разделе «Это заголовок», я не хочу, чтобы этот заголовок был частью списка, поскольку он уже присутствует — и это то, с чем я борюсь.

Есть ли какие-нибудь советы о том, как я могу сопоставить ближайший элемент заголовка из элемента списка, который я выбрал для активации/деактивации, с содержимым, с элементом в списке, в который я его перемещаю? Примечание: может быть много разных элементов заголовка, все с разным содержанием, поэтому я должен сопоставить каждый из них, и если какой-либо из них соответствует, мне НЕ нужно добавлять заголовок - если ни один из них не соответствует, я должен добавить заголовок (и, конечно, поместите перемещенный элемент под правильный заголовок, но это должно быть довольно легко сделать).

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

 

[Dimys1]

Вот рабочая демонстрация:

http://www.cutcodedown.com/for_others/PoPSiCLe/listSelect/template.html

Разметка реального функционала:

<div id="scriptMessage"></div>
<noscript>
<p>
Column functionality require JavaScript, but you can still select or deselect items by using the checkboxes
</p>
</noscript>
<ul id="selected">
<li>
<input type="checkbox" id="element1" checked>
<label for="element1">First</label>
</li><li>
<input type="checkbox" id="element2" checked>
<label for="element2">Second</label>
</li><li>
<input type="checkbox" id="element3">
<label for="element3">Third</label>
</li><li>
<input type="checkbox" id="element4" checked>
<label for="element4">Fourth</label>
</li>
</ul>

Код (разметка): довольно простой. Если вы не хотите, чтобы какие-либо LI можно было копировать, я сделал проверку скриптом наличия ввода, поэтому, если вы хотите, чтобы ваши заголовки были там, просто не ставьте там флажок или метку.

Сценарий:
http://www.cutcodedown.com/for_others/PoPSiCLe/listSelect/listSelect.js

Начинается с некоторых моих вспомогательных функций, поскольку jQ просто бесит меня из-за слишком больших, неправильных/небрежных методологий и попыток изменить работу JavaScript.

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

Я получаю выбранный список по его идентификатору, беру первый LI и создаю невыбранный UL - поскольку опять-таки нет причин для существования этого списка без сценариев. Я добавляю этот новый список после выбранного UL#.

Затем я просматриваю LI (используя удобные помощники для фильтрации всех узлов, не являющихся элементами) и его дочерние узлы, чтобы перехватить входные данные, создаю новый LI в новом списке, помещаю существующий LI и новый LI в элемент флажка в качестве свойств data_, вызовите функцию обновления статуса, чтобы добавить или удалить display:hidden соответствующим образом, а затем подключите каждый флажок как для onclick, так и для onchange (поскольку не все браузеры делают это в одном и том же порядке), чтобы вызвать обновление скрыто/блокировать в LI соответствующим образом.

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

Вы также МОЖЕТЕ, чтобы обработчик просто копировал значения из одного списка в другой, но такое количество манипуляций с DOM в реальном времени может съедать память из-за отсутствия качественной сборки мусора в FF, если кто-то слишком часто щелкает вперед и назад между двумя столбцами. . Это также значительно упрощает поддержание их порядка, поскольку все они всегда существуют в правильном порядке, мы просто меняем способ их отображения.

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

Для другого подхода потребуется CSS3, но вы можете просто увеличить ширину UL до двойной ширины LI и просто использовать позицию: относительно с левым: 0 и левым: 50%, чтобы сдвинуть их на другую сторону - хотя это НЕ будет сжимать их по вертикали, что, я считаю, и является вашим намерением.

 

[jensen]

Эй, это здорово. Однако довольно МНОГО javascript - хотя некоторые из них, конечно, являются вспомогательными функциями, загруженными сюда с целью заставить реальную функциональность работать. Выглядит аккуратно, работает отлично. Я мог бы использовать это (однако, учитывая мой предыдущий пост, мне придется подумать, возможно, просто использовать один список и просто отмечать элементы как активные или неактивные). Спасибо за усилия, чувак.

 

[Vovchik1]

Ладно, я даже не могу понять смысла того, что ты только что сказал. Хорошо, что такое ДАННЫЕ и какой в этом ПУТЬ? Вы описываете функциональность, которая для меня не имеет никакого смысла даже ИМЕТЬ эту функциональность - поэтому я думаю, мне нужно знать больше о том, ЧЕМ вы манипулируете и почему.

Я бы подумал, что если бы вы «перемещали» заголовок, вы бы перемещали ВСЕ его дочерние элементы, а не только первого дочернего элемента... и в этом случае я бы строил списки внутри списков - «заголовок» находился в родительском LI как выпадающее меню.

Хотя, если бы это ДЕЙСТВИТЕЛЬНО заголовки, я бы использовал их как теги заголовков, и оба они существовали бы постоянно в обоих списках, скрывая их только тогда, когда у них нет дочерних элементов.

На самом деле, это начинает звучать как нечто, что я никогда бы не разместил на веб-сайте — или в апплете, если уж на то пошло.

 

[Вовка Морковка]

Немного раздутый, говорите? В jQuery? ДЕЙСТВИТЕЛЬНО? Кто это предвидел?

Помните, как я всегда говорю: «СНАЧАЛА заставьте это работать без написания сценариев!»? Да, это.

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

Для разметки используйте что-то вроде:

<ul id="selectList"> <li>
<input type="checkbox" id="element1" checked>
<label for="element1">Describe This</label>
</li><li>
<input type="checkbox" id="element2" checked>
<label for="element2">Describe This</label>
</li><li>
<input type="checkbox" id="element3">
<label for="element3">Describe This</label>
</li><li>
<input type="checkbox" id="element4" checked>
<label for="element4">Describe This</label>
</li>
</ul>

Код (разметка): если флажок установлен, это означает, что вы хотите, чтобы он был в «selectList».

Работает сценарий включения или выключения в зависимости от активации/не активации. Когда начинается сценарий, я создаю новый пустой список, добавляемый после первого, перебираю все LI через nodeWalking, присоединяя к каждому входу обработчик onclick AND onchange (отстой, но вам нужно прикрепить один и тот же обработчик как к IE, так и к FF). глупы), затем клонировать метку в новый элемент списка во втором списке, прикрепляя ОБА метки как свойства ввода (использование атрибутов данных на самом деле хорошо подходит для этого), чтобы они могли менять классы для отображения или не отображения. их.

Помните, что щелчок по метке аналогичен щелчку по флажку, поэтому просто скройте флажок, когда сценарий включен. (один из немногих случаев, когда я прикреплял класс к BODY).

Дайте мне несколько, и я соберу демо, хотя извините за отсутствие jQuery, я НЕ ДОСТАТОЧНО ГЛУП, чтобы использовать эту чушь.

 

[mactep1]

В принципе, у вас есть что-то вроде этого:

<ul id="active_events"> <li class="heading">Location 1</li> <li>Event 1 - day 1</li> <li>Event 2 - day 2</li> <li class="heading">Location 2</li> <li>Event 3 - day 7</li> <li>Event 4 - day 5</li>
</ul>
<ul id="inactive_events"> <li class="heading">Location 3</li> <li>Event 5 - deactivated event - day 4</li>
</ul>

Код (разметка): Хорошо, если я сейчас продолжу и деактивирую событие 2, оно переместится в список inactive_events. Но заголовка (Местоположение 1) не будет во втором списке, поэтому его также необходимо будет скопировать. Это не проблема. Однако, если я собираюсь деактивировать и событие 1, после деактивации события 2 заголовок этих событий (Местоположение 1) уже будет в списке inactive_events, и его не нужно будет копировать снова. Поэтому я искал простой способ проверить, находится ли заголовок элемента, которым я сейчас манипулирую, в списке приема, и если нет, скопировать его.

Тем не менее, я размышляю, стоит ли мне просто заполнить оба списка местоположениями и просто скрыть/показать их в зависимости от наличия в них событий. Будет выглядеть не так хорошо, но с ним будет немного легче работать.

 

[mmmprofit]

Ну да, на самом деле это намного аккуратнее, но не решает мою настоящую проблему — «заголовок» внутри списка. Т.е. у меня есть отдельный элемент (ну еще один li-элемент), который не имеет ничего общего с подвижными элементами, но является заголовком (да, я знаю, что это злоупотребление списком) - я хочу переместить заголовок, когда это необходимо, но не в том случае, если заголовок уже существует в разметке списка, в который я перемещаю элемент.

По сути, это список ежедневных событий, который может быть либо активным (используется во внутреннем календаре), либо неактивным (не используется вообще) - активные, если нажать на них для деактивации, переходят в деактивированный список, и наоборот. . Однако можно добавлять и/или удалять эти элементы вместе. Следовательно, в одном и том же месте может быть несколько событий в один и тот же день, активных или неактивных, или в разные дни, или в сочетании всех этих событий. Следовательно, мне нужно ТАКЖЕ перемещать элемент заголовка, когда я перемещаю первый элемент, принадлежащий этому заголовку. Что в настоящее время и делает мой код, но ему необходимо проверить, присутствует ли уже этот заголовок, чтобы избежать дублирования одного и того же заголовка. Следовательно, я искал что-то, что проходит через DOM, выбирает ближайший заголовок и копирует его в другой список, если этот заголовок еще не присутствует. Если заголовок присутствует, он просто скопирует элемент в другой список, вообще не беспокоясь о заголовке.

 

[strekozarecords]

О, ну, я решил все переделать и сделать проще (это всегда хорошо). Один

• 
  с перечисленными элементами, а затем просто измените цвет деактивированных (установите их на красный, оранжевый или что-то в этом роде) - делает всю страницу короче, меньше кода и нет необходимости в сложных структурах или скриптах, просто замена классов и пара атрибутов, которые необходимо изменить.