开发者

How do I move all the li elements with specific css style to another ul?

I need to move all of the <li style="display:none;"> under a particular <ul id="bob"> 开发者_如何学JAVAinto a different <ul id="cat">. In performing this move, I need all the classes, ids, and css styling to be preserved, and obviously the content as well.


Easy one-liner:

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

will move all ul#bob > li which are hidden, which is a superset of ul#bob > li which have style="display:none;", since:

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


If you really want only those elements whose style attribute is display: none;, I'd do it with .filter() and a regexp:

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

The regexp is case- and (mostly) whitespace-insensitive, and allows the semicolon to be optional, which is valid CSS. If you don't care about either of those you can git-r-dun with a one-liner, as before:

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


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


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜