javascript - 如何将具有特定 css 样式的所有 li 元素移动到另一个 ul？

Question

我需要移动所有 <li style="display:none;">在特定的 <ul id="bob"> 下进入不同的<ul id="cat"> .在执行此移动时，我需要保留所有类、id 和 css 样式，显然还需要保留内容。

Answer 1

简单的一行:

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

将移动所有隐藏的 ul#bob > li，它是 ul#bob > li 的超集，它具有 style="display:none ;"，因为:

Elements can be considered hidden for several reasons:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

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');