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


Tags: javascript,jquery,html,css,html-lists

Problem :

I need to move all of the <li style="display:none;"> under a particular <ul id="bob"> into 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.



Solution :

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

    CSS Howto..

    CSS Firefox - How to deactivate the dotted border ( firefox click indicator )?

    How to create a box with header with css styling?

    How to center in div without text-align?

    How to: Reduce font-size if a line breaks

    In CSS, how to select a particular tag under mutiple ids?

    How to use Javascript in a innerHTML inline css scenario?

    How to add visual indicator of focus for Radio Button for Firefox

    How to vertically align div text?

    How do I create a full screen click target to work with CSS-only navigation menu with :target?

    CSS positioning: how to make it relative to one element but not the other?

    How can I achieve the mouseover effect like on wikipedia?

    How to apply a CSS height setting to all child elements?

    How to prevent conflicts between css rules

    In firefox, how to change color of text in a treecell using javascript

    How to add font to web application .css file

    How to get custom css to load after richfaces?

    How to use 3-digit color codes rather than 6-digit color codes in CSS?

    How to add javascript to an image from the content_wrapper in the css stylesheet

    How to change the display property in a css class using js when user clicks a button

    Animate Chartist on show

    meteor: how to use multiple classes in css selector

    How can add atribute to css of page on page load event

    Navigation Menu That Shows/Hides On Rollover and Click

    How do I add an image directly below a text header?

    How to do a best fit vertical align

    How to center a child div with a smaller parent div

    Push vertically resizable Div to bottom of wrapper. How?

    CSS selector: how to select non-element sibling node?

    How do I to adjust the identation [closed]

    How to move the second child in my nav menu with CSS