jQuery - If first element has class then Function -

i'm looking add piece of code sitewide affect of pages.

right now, goes this.

if($('#container > div:first').attr('id') == 'filteroptions') {   $('#container').prepend('<div class="banner"></div>'); } 

the output:

<div id="container">   <div class="banner"></div>   <div id="filteroptions"><div> </div> 

example, if container looked this:

<div id="container">   <div class="existingbanner"></div>   <div id="filteroptions"><div> </div> 

nothing happen first div doesn't have filteroptions id.

now i've hit bump have looks banner added to

<div id="container">   <a class="existingbanner" href="#"></a>   <div id="filteroptions"><div> </div> 

this have double banner want avoid. because it's anchor instead of div.

so question is. instead of targeting div:first how target elements?

something like...

if($('#container > any:first').attr('id') == 'filteroptions') { ... }

you have use all selector (*)

if($('#container > *:first').attr('id') == 'filteroptions') {   $('#container').prepend('<div class="banner"></div>'); } 

or can use functional approach:

// hoisting var $container = $('#container'); if($container.children().first().attr('id') == 'filteroptions') {   $container.prepend('<div class="banner"></div>'); } 

---

you flip logic around:

// filteroptions first child: if ( $('#filteroptions').prev().length === 0 ) {     $('container').prepend('<div class="banner"></div>') }