CODEWITHSUNDEEP
jqueryhtmlcss
kazzius
kazzius

Reputation: 9

How to change all children elements inside a div

I want to change all elements inside the div with the class ms-rtestate-field cause they are created dinamically. This is what I accomplished so far, hope you can give me any pointers. Thanks in advance

$(function() {
  $('.ms-rtestate-field').each(function() {
    $(this).find("*").css('background-color', 'blue');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div dir="" class="ms-rtestate-field">
  <div class="ExternalClass1">
    <div class="ExternalClass2">

      <div class="External3">
        <p>text</p>
        <p>text</p>
        <div style="font-size:12pt">text</div>
      </div>

    </div>
  </div>
</div>

Upvotes: 0

Views: 3682

Answers (4)

Akshay Chawla
Akshay Chawla

Reputation: 613

You can try following js code:

$(".ms-rtestate-field").each(function() {
    $(this).find("*").css("border", "1px solid blue");//perform whatever you want.
});

In case you want to apply this js after dynamic content has loaded then make a function of same code and make a call to that function.

function dynamicContent()
{
   $('.ms-rtestate-field').each(function() {
      $(this).find("*").css("border", "1px solid red");
   });  
}

Upvotes: 0

connexo
connexo

Reputation: 56754

The solution you seem to need is not jQuery or Javascript-based, it's actually CSS.

.blue-children * {
    background-color: blue;
}

Now set this CSS class dynamically on all .ms-rtestate-field where you need blue-backgrounded items.

Using CSS here allows you to even change children dynamically (e.g. add or append some) and they will be affected, too.

Upvotes: 2

Joy Biswas
Joy Biswas

Reputation: 6527

You need to select all the divs which are inside the div.ms-rtestate-field

$('.ms-rtestate-field > div').css('background-color','blue');

Upvotes: 1

Mark
Mark

Reputation: 4873

Try this:

$(function(){
    $('.ms-rtestate-field').each(function() {
        $(this).find("div").css('background-color','blue');
    });
});

Upvotes: 0

Related Questions