Home/ Questions/Q 7541273
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T07:51:01+00:00

I want to select each of element below and apply multiple jquery commands to

  • 0

I want to select each of element below and apply multiple jquery commands to it, any command.

HTML:

<body>
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
    <div class="last"></div> <!-- SELECT FROM HERE -->
    <div class="option"></div>
    <div class="option">
    <img src="a.jpg"/>
    <table>
       <td><tr>1</tr></td>
       <td><tr>2</tr></td>
    </table>
    </div>
    <div class="option"></div>
</body>

jQuery:

$(".last").nextAll().each(function () {

       $(this).css('background-color','red');
       $(this).addClass('below');
       var thisobj = $(this);
       //Example ->
       $(this).load(function() {
           $(thisobj).addClass('loaded');
       });
       $(this).error(function(){
           $(thisobj).addClass('error');
       });
       //more code etc...

});

To make html look like this with jQuery: select everything below class and apply functions. Count if all divs have loaded.

<body>
    <div class="option"></div>
    <div class="option"></div>
    <div class="option"></div>
    <div class="last"></div>
    <div class="option loaded" style="background-color:red;"></div>
    <div class="option error" style="background-color:red;">
         <img class="loaded" style="background-color:red;" src="a.jpg"/>
         <table class="loaded" style="background-color:red;">
               <tr class="error" style="background-color:red;">
                  <td class="loaded" style="background-color:red;">abc</td>
               </tr>
               <tr class="loaded" style="background-color:red;">
                  <td class="loaded" style="background-color:red;">abc</td>
               </tr>
         </table>
    </div>
    <div class="loaded" class="option" style="background-color:red;"></div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here you go. This will let you traverse the DOM tree. I’m only applying the red style to show it works, but you can modify it accordingly

    function style_children(parent) {
    parent.css('background-color', 'red');
    parent.children().each(function() {
        style_children($(this));
    });
}

$(".last").nextAll().each(function() {
    style_children($(this));
});

    And correct me if I’m wrong, but if this placed in $(document).ready() function, like it should be, your load and error functions won’t fire b/c they have already fired before your entire document was ready. The load and error functions will only work if you adding content dynamically after the doc.ready has been fired.

    • 0