0

How can I select each and everything on a page except a particular div using jQuery?

Actually I am trying to fade the rest of background on popup of a particular div. But the problem is that not everything is inside some div. Few elements don't have any parent div.

<body>
    12345

    <div id='second_div'>
       XXXXXX
    </div>

    56789

    <div id='popup'>
       AAAAA
    </div>
</body>

I am using code below but this is not fading content which don't have a parent div(i.e 12345 and 56789). It is only fading content of 'second_div'(i.e. XXXXXX ).

$('body > div:not(#popup)').css("opacity",'0.7');

Please guide me on how to do this using jQuery.

2
  • 1
    Why not just add one div as an overlay and then position your special modal div above it with a higher z-index?
    – j08691
    May 8, 2012 at 20:39
  • You need to wrap it before you tap i... er before you fade it..
    – Loktar
    May 8, 2012 at 20:39

2 Answers 2

3

I think you are looking for this:

$("body > *").not('#popup').css("opacity", '0.7');

The reason this works is because it selects all the direct descendants of body and then removes all direct descendants that have an id of popup.

1
  • I just re-read the question. I was under the impression that the unwrapped text was not supposed to "dim". In that case the only solution is to wrap them in something like a div or p.
    – Alec Gorge
    May 8, 2012 at 20:47
1

Tested it and works perfectly, although I've tested the other one and it doesn't but anyway, good luck!

var lines = $('body').html().split('\n');
$.each(lines, function(k, v){
  lines[k] = '<span>'+v+'</span>';
});

$('body').html(lines.join(''));

$('body > *').css("opacity", '0.7').find('#popup').parent().css("opacity", '1');
;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.