Select previous div that contains specific id

Question

I am using joomla and I have the following html

<div id="ja-footerwrap"> <div class="moduletable"> <div id="bottom-slider"> <!--some contents--> </div> </div> <div class="moduletable"> <div id="bottom-slider"> <!--some contents--> </div> </div> <div class="moduletable"> <!--some contents--> </div> <!--and other divs with classes moduletable------> </div> 

I need to select moduletable and apply display: inline-block; only to this div that contains the id of the bottom slider . How can i do this?

Answer 1

First of all, you cannot have several DOM objects with the same identifier, then the first thing to change the markup is and convert id="bottom-slider" to class="bottom-slider"

Then you can change the parent divs using the moduletable and bottom-slider classes using jQuery:

 $('.bottom-slider').parent('.moduletable').css({'display':'inline-block'}); 

Here's the fiddle: http://jsfiddle.net/9tvcf/

Hope this helps

Answer 2

If you use jQuery, you can directly do

 $('.bottom-slider').css({'display':'inline-block'}); 

PS: change identifier to class.

Answer 3

Using css4, you can do it with pure css too.

 .module-table! > #bottom-slider { display:inline-block; } 

Answer 4

I hope that in the future this selector will be selected as

 .bottom-slider - .moduletable{/*css here*/} 

This method would be best because there is a + symbol for choosing children.

Like ~ , we hope to post ^