根据子项操作父项

Question

Is there a way to add any style property like 'float' to the parent div element on the basis of its child div element(preferably using javascript and without adding any extra div).

<div class="chat-message">
    <span class="chat-message-me">xxx</span>
    <span class="chat-message-content">hiyyy</span>
</div>

<div class="chat-message">
    <span class="chat-message-them">01:25 me:&nbsp;</span>
    <span class="chat-message-content">hi</span>
</div>

like in this code sample the parent divs are same but the child divs differ in class. So can we float the div element on its basis?

i suppose it would require the 'if' statement but i am unable to do it..

please help.

Thanx!

Answer 1

Try This

 $('.chat-message-me').parent('div').addClass('newClass');

Have a Look

StackOverflow Answer

Answer 2

in jQuery:

$('chat-message-them').parent().addClass('left');

CSS

.left {float:left}

Answer 3

If you used sass, this is easily possible. For example this bit of css (in a sass sheet) will target the parent directories:

.chat-message-me { 
  .chat-message & {
    float: left;
  }
}
.chat-message-from { 
  .chat-message & {
    float: right;
  }
}