Как переместить все элементы li с определенным стилем CSS в другой ul?

Question

Мне нужно переместить все <li style="display:none;"> под определенный <ul id="bob"> в другой <ul id="cat">. При выполнении этого перемещения мне нужно сохранить все классы, идентификаторы и стили CSS, а также, разумеется, и содержимое.

Answer 1

Легкий однострочный:

$('#bob > li:hidden').appendTo('#cat');

переместит все скрытые ul#bob > li, которые являются надмножеством ul#bob > li, которые имеют style="display:none;", так как:

Элементы могут считаться скрытыми по нескольким причинам:

• Они имеют значение CSS display none.
• Это элементы формы с type="hidden".
• Их ширина и высота явно установлены на 0.
• Элемент-предок скрыт, поэтому элемент не отображается на странице.

http://api.jquery.com/hidden-selector

---

Если вы действительно хотите только тех элементов, у которых атрибут style равен display: none;, я бы сделал это с .filter() и регулярным выражением :

var pattern = /^\s*display:\s*none\s*;?\s*$/gi;
$('#bob > li').filter(function ()
{
    return pattern.test($(this).prop('style'));
}).appendTo('#cat');

Регулярное выражение является регистронезависимым и (в основном) нечувствительным к пробелам и позволяет необязательной точке с запятой, что является допустимым CSS. Если вас не волнует ни один из них, вы можете использовать git-r-dun с одной строкой, как и раньше:

$('#bob > li[style="display:none;"]').appendTo('#cat');

Answer 2

$('#bob li:hidden').remove().end().appendTo('#cat'); 

Answer 3

$('#cat').append($('#bob > li').filter(':hidden').remove());