jQuery to loop through elements with the same class











up vote
457
down vote

favorite
77












I have a load of divs with the class testimonial and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.



Does anyone know how I would do this?










share|improve this question




























    up vote
    457
    down vote

    favorite
    77












    I have a load of divs with the class testimonial and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.



    Does anyone know how I would do this?










    share|improve this question


























      up vote
      457
      down vote

      favorite
      77









      up vote
      457
      down vote

      favorite
      77






      77





      I have a load of divs with the class testimonial and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.



      Does anyone know how I would do this?










      share|improve this question















      I have a load of divs with the class testimonial and I want to use jquery to loop through them to check for each div if a specific condition is true. If it is true, it should perform an action.



      Does anyone know how I would do this?







      javascript jquery jquery-selectors






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Dec 21 '12 at 12:49









      Kees C. Bakker

      17.5k1783171




      17.5k1783171










      asked Jan 19 '11 at 12:41









      geoffs3310

      5,039205681




      5,039205681
























          14 Answers
          14






          active

          oldest

          votes

















          up vote
          845
          down vote



          accepted










          Use each: 'i' is the postion in the array, obj is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this) as well).



          $('.testimonial').each(function(i, obj) {
          //test
          });


          Check the api reference for more information.






          share|improve this answer



















          • 2




            The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
            – darwindeeds
            Jun 28 '12 at 16:22






          • 1




            @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
            – Kees C. Bakker
            Jun 29 '12 at 7:09








          • 107




            It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
            – AndreasT
            Sep 11 '12 at 10:50










          • Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
            – techie_28
            Sep 21 '12 at 6:09








          • 11




            +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
            – Fr0zenFyr
            Nov 17 '15 at 7:34


















          up vote
          105
          down vote













          try this...



          $('.testimonial').each(function(){
          //if statement here
          // use $(this) to reference the current div in the loop
          //you can try something like...


          if(condition){

          }


          });





          share|improve this answer



















          • 1




            FYI: break; will not break. You must use return false;
            – Kolob Canyon
            Dec 18 '17 at 20:18


















          up vote
          40
          down vote













          It's pretty simple to do this without jQuery these days.



          Without jQuery:



          Just select the elements and use the .forEach() method to iterate over them:



          var testimonials = document.querySelectorAll('.testimonial');
          Array.prototype.forEach.call(testimonials, function(elements, index) {
          // conditional here.. access elements
          });





          share|improve this answer






























            up vote
            36
            down vote













            Try this example



            Html



            <div class="testimonial" data-index="1">
            Testimonial 1
            </div>
            <div class="testimonial" data-index="2">
            Testimonial 2
            </div>
            <div class="testimonial" data-index="3">
            Testimonial 3
            </div>
            <div class="testimonial" data-index="4">
            Testimonial 4
            </div>
            <div class="testimonial" data-index="5">
            Testimonial 5
            </div>


            When we want to access those divs which has data-index greater than 2 then we need this jquery.



            $('div[class="testimonial"]').each(function(index,item){
            if(parseInt($(item).data('index'))>2){
            $(item).html('Testimonial '+(index+1)+' by each loop');
            }
            });


            Working example fiddle






            share|improve this answer






























              up vote
              26
              down vote













              you can do it this way



              $('.testimonial').each(function(index, obj){
              //you can use this to access the current item
              });





              share|improve this answer






























                up vote
                17
                down vote













                divs  = $('.testimonial')
                for(ind in divs){
                div = divs[ind];
                //do whatever you want
                }





                share|improve this answer





















                • that doesn't give you the jquery objects though, just dom elements
                  – celwell
                  Feb 3 '14 at 19:25










                • @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                  – GoldBishop
                  Nov 17 '17 at 17:34


















                up vote
                13
                down vote













                You can do this concisely using .filter. The following example will hide all .testimonial divs containing the word "something":



                $(".testimonial").filter(function() {
                return $(this).text().toLowerCase().indexOf("something") !== -1;
                }).hide();





                share|improve this answer




























                  up vote
                  13
                  down vote













                  jQuery's .eq() can help you traverse through elements with an indexed approach.



                  var testimonialElements = $(".testimonial");
                  for(var i=0; i<testimonialElements.length; i++){
                  var element = testimonialElements.eq(i);
                  //do something with element
                  }





                  share|improve this answer

















                  • 1




                    this is the most efficient approach indeed.
                    – Amin Setayeshfar
                    Jan 20 '17 at 1:00


















                  up vote
                  8
                  down vote













                  I may be missing part of the question, but I believe you can simply do this:



                  $('.testimonial').each(function() {
                  if(...Condition...) {
                  ...Do Stuff...
                  }
                  }





                  share|improve this answer




























                    up vote
                    8
                    down vote













                    With a simple for loop:



                    var testimonials= $('.testimonial');
                    for (var i = 0; i < testimonials.length; i++) {
                    // Using $() to re-wrap the element.
                    $(testimonials[i]).text('a');
                    }





                    share|improve this answer




























                      up vote
                      7
                      down vote













                      Without jQuery updated






                      document.querySelectorAll('.testimonial').forEach(function (element, index) {
                      element.innerHTML = 'Testimonial ' + (index + 1);
                      });

                      <div class="testimonial"></div>
                      <div class="testimonial"></div>








                      share|improve this answer





















                      • almost the same answer is already here, I think you should edit existing
                        – Oleh Rybalchenko
                        Oct 3 '17 at 8:18


















                      up vote
                      6
                      down vote













                      $('.testimonal').each(function(i,v){
                      if (condition) {
                      doSomething();
                      }
                      });





                      share|improve this answer




























                        up vote
                        4
                        down vote













                        More precise:



                        $.each($('.testimonal'), function(index, value) { 
                        console.log(index + ':' + value);
                        });





                        share|improve this answer

















                        • 3




                          Why more precise?
                          – Opux
                          Jan 22 '16 at 15:36










                        • This is nice if you like reading/writing from a more functional perspective.
                          – Sgnl
                          Aug 29 '17 at 21:18


















                        up vote
                        2
                        down vote













                        In JavaScript ES6 using spread ... operator



                        [...document.querySelectorAll('.testimonial')].forEach( el => {
                        el.style.color = 'red';
                        });


                        over a array-like collection given by Element.querySelectorAll()






                        [...document.querySelectorAll('.testimonial')].forEach( el => {
                        el.style.color = 'red';
                        const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                        console.log( stuff );
                        });

                        <p class="testimonial" id="1">This is some text</p>

                        <div class="testimonial" id="2">Lorem ipsum</div>








                        share|improve this answer























                          Your Answer






                          StackExchange.ifUsing("editor", function () {
                          StackExchange.using("externalEditor", function () {
                          StackExchange.using("snippets", function () {
                          StackExchange.snippets.init();
                          });
                          });
                          }, "code-snippets");

                          StackExchange.ready(function() {
                          var channelOptions = {
                          tags: "".split(" "),
                          id: "1"
                          };
                          initTagRenderer("".split(" "), "".split(" "), channelOptions);

                          StackExchange.using("externalEditor", function() {
                          // Have to fire editor after snippets, if snippets enabled
                          if (StackExchange.settings.snippets.snippetsEnabled) {
                          StackExchange.using("snippets", function() {
                          createEditor();
                          });
                          }
                          else {
                          createEditor();
                          }
                          });

                          function createEditor() {
                          StackExchange.prepareEditor({
                          heartbeatType: 'answer',
                          convertImagesToLinks: true,
                          noModals: true,
                          showLowRepImageUploadWarning: true,
                          reputationToPostImages: 10,
                          bindNavPrevention: true,
                          postfix: "",
                          imageUploader: {
                          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
                          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
                          allowUrls: true
                          },
                          onDemand: true,
                          discardSelector: ".discard-answer"
                          ,immediatelyShowMarkdownHelp:true
                          });


                          }
                          });














                          draft saved

                          draft discarded


















                          StackExchange.ready(
                          function () {
                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f4735342%2fjquery-to-loop-through-elements-with-the-same-class%23new-answer', 'question_page');
                          }
                          );

                          Post as a guest















                          Required, but never shown

























                          14 Answers
                          14






                          active

                          oldest

                          votes








                          14 Answers
                          14






                          active

                          oldest

                          votes









                          active

                          oldest

                          votes






                          active

                          oldest

                          votes








                          up vote
                          845
                          down vote



                          accepted










                          Use each: 'i' is the postion in the array, obj is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this) as well).



                          $('.testimonial').each(function(i, obj) {
                          //test
                          });


                          Check the api reference for more information.






                          share|improve this answer



















                          • 2




                            The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
                            – darwindeeds
                            Jun 28 '12 at 16:22






                          • 1




                            @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
                            – Kees C. Bakker
                            Jun 29 '12 at 7:09








                          • 107




                            It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
                            – AndreasT
                            Sep 11 '12 at 10:50










                          • Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
                            – techie_28
                            Sep 21 '12 at 6:09








                          • 11




                            +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
                            – Fr0zenFyr
                            Nov 17 '15 at 7:34















                          up vote
                          845
                          down vote



                          accepted










                          Use each: 'i' is the postion in the array, obj is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this) as well).



                          $('.testimonial').each(function(i, obj) {
                          //test
                          });


                          Check the api reference for more information.






                          share|improve this answer



















                          • 2




                            The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
                            – darwindeeds
                            Jun 28 '12 at 16:22






                          • 1




                            @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
                            – Kees C. Bakker
                            Jun 29 '12 at 7:09








                          • 107




                            It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
                            – AndreasT
                            Sep 11 '12 at 10:50










                          • Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
                            – techie_28
                            Sep 21 '12 at 6:09








                          • 11




                            +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
                            – Fr0zenFyr
                            Nov 17 '15 at 7:34













                          up vote
                          845
                          down vote



                          accepted







                          up vote
                          845
                          down vote



                          accepted






                          Use each: 'i' is the postion in the array, obj is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this) as well).



                          $('.testimonial').each(function(i, obj) {
                          //test
                          });


                          Check the api reference for more information.






                          share|improve this answer














                          Use each: 'i' is the postion in the array, obj is the DOM object that you are iterating (can be accessed through the jQuery wrapper $(this) as well).



                          $('.testimonial').each(function(i, obj) {
                          //test
                          });


                          Check the api reference for more information.







                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Dec 22 '15 at 13:17

























                          answered Jan 19 '11 at 12:43









                          Kees C. Bakker

                          17.5k1783171




                          17.5k1783171








                          • 2




                            The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
                            – darwindeeds
                            Jun 28 '12 at 16:22






                          • 1




                            @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
                            – Kees C. Bakker
                            Jun 29 '12 at 7:09








                          • 107




                            It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
                            – AndreasT
                            Sep 11 '12 at 10:50










                          • Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
                            – techie_28
                            Sep 21 '12 at 6:09








                          • 11




                            +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
                            – Fr0zenFyr
                            Nov 17 '15 at 7:34














                          • 2




                            The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
                            – darwindeeds
                            Jun 28 '12 at 16:22






                          • 1




                            @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
                            – Kees C. Bakker
                            Jun 29 '12 at 7:09








                          • 107




                            It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
                            – AndreasT
                            Sep 11 '12 at 10:50










                          • Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
                            – techie_28
                            Sep 21 '12 at 6:09








                          • 11




                            +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
                            – Fr0zenFyr
                            Nov 17 '15 at 7:34








                          2




                          2




                          The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
                          – darwindeeds
                          Jun 28 '12 at 16:22




                          The function with i, obj parameters helps a lot. If just each was used then it was not iterating.
                          – darwindeeds
                          Jun 28 '12 at 16:22




                          1




                          1




                          @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
                          – Kees C. Bakker
                          Jun 29 '12 at 7:09






                          @Darwindeeds correct! The function is used by the actual iterator to process each item. Returning false will stop iteration.
                          – Kees C. Bakker
                          Jun 29 '12 at 7:09






                          107




                          107




                          It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
                          – AndreasT
                          Sep 11 '12 at 10:50




                          It is worth pointing out, that "obj" will be the dom object, while $(this) is the jQuery object.
                          – AndreasT
                          Sep 11 '12 at 10:50












                          Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
                          – techie_28
                          Sep 21 '12 at 6:09






                          Cant we do jQuery(this 'ul li').length to get length of that elements ul li?
                          – techie_28
                          Sep 21 '12 at 6:09






                          11




                          11




                          +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
                          – Fr0zenFyr
                          Nov 17 '15 at 7:34




                          +1 for suggesting $(this) to access the object... obj being DOM object doesn't allow to attach functions directly for example obj.empty()
                          – Fr0zenFyr
                          Nov 17 '15 at 7:34












                          up vote
                          105
                          down vote













                          try this...



                          $('.testimonial').each(function(){
                          //if statement here
                          // use $(this) to reference the current div in the loop
                          //you can try something like...


                          if(condition){

                          }


                          });





                          share|improve this answer



















                          • 1




                            FYI: break; will not break. You must use return false;
                            – Kolob Canyon
                            Dec 18 '17 at 20:18















                          up vote
                          105
                          down vote













                          try this...



                          $('.testimonial').each(function(){
                          //if statement here
                          // use $(this) to reference the current div in the loop
                          //you can try something like...


                          if(condition){

                          }


                          });





                          share|improve this answer



















                          • 1




                            FYI: break; will not break. You must use return false;
                            – Kolob Canyon
                            Dec 18 '17 at 20:18













                          up vote
                          105
                          down vote










                          up vote
                          105
                          down vote









                          try this...



                          $('.testimonial').each(function(){
                          //if statement here
                          // use $(this) to reference the current div in the loop
                          //you can try something like...


                          if(condition){

                          }


                          });





                          share|improve this answer














                          try this...



                          $('.testimonial').each(function(){
                          //if statement here
                          // use $(this) to reference the current div in the loop
                          //you can try something like...


                          if(condition){

                          }


                          });






                          share|improve this answer














                          share|improve this answer



                          share|improve this answer








                          edited Jan 19 '11 at 12:48

























                          answered Jan 19 '11 at 12:43









                          stephen776

                          5,4071158111




                          5,4071158111








                          • 1




                            FYI: break; will not break. You must use return false;
                            – Kolob Canyon
                            Dec 18 '17 at 20:18














                          • 1




                            FYI: break; will not break. You must use return false;
                            – Kolob Canyon
                            Dec 18 '17 at 20:18








                          1




                          1




                          FYI: break; will not break. You must use return false;
                          – Kolob Canyon
                          Dec 18 '17 at 20:18




                          FYI: break; will not break. You must use return false;
                          – Kolob Canyon
                          Dec 18 '17 at 20:18










                          up vote
                          40
                          down vote













                          It's pretty simple to do this without jQuery these days.



                          Without jQuery:



                          Just select the elements and use the .forEach() method to iterate over them:



                          var testimonials = document.querySelectorAll('.testimonial');
                          Array.prototype.forEach.call(testimonials, function(elements, index) {
                          // conditional here.. access elements
                          });





                          share|improve this answer



























                            up vote
                            40
                            down vote













                            It's pretty simple to do this without jQuery these days.



                            Without jQuery:



                            Just select the elements and use the .forEach() method to iterate over them:



                            var testimonials = document.querySelectorAll('.testimonial');
                            Array.prototype.forEach.call(testimonials, function(elements, index) {
                            // conditional here.. access elements
                            });





                            share|improve this answer

























                              up vote
                              40
                              down vote










                              up vote
                              40
                              down vote









                              It's pretty simple to do this without jQuery these days.



                              Without jQuery:



                              Just select the elements and use the .forEach() method to iterate over them:



                              var testimonials = document.querySelectorAll('.testimonial');
                              Array.prototype.forEach.call(testimonials, function(elements, index) {
                              // conditional here.. access elements
                              });





                              share|improve this answer














                              It's pretty simple to do this without jQuery these days.



                              Without jQuery:



                              Just select the elements and use the .forEach() method to iterate over them:



                              var testimonials = document.querySelectorAll('.testimonial');
                              Array.prototype.forEach.call(testimonials, function(elements, index) {
                              // conditional here.. access elements
                              });






                              share|improve this answer














                              share|improve this answer



                              share|improve this answer








                              edited Jan 24 '15 at 1:17

























                              answered Jan 23 '15 at 4:07









                              Josh Crozier

                              152k35268221




                              152k35268221






















                                  up vote
                                  36
                                  down vote













                                  Try this example



                                  Html



                                  <div class="testimonial" data-index="1">
                                  Testimonial 1
                                  </div>
                                  <div class="testimonial" data-index="2">
                                  Testimonial 2
                                  </div>
                                  <div class="testimonial" data-index="3">
                                  Testimonial 3
                                  </div>
                                  <div class="testimonial" data-index="4">
                                  Testimonial 4
                                  </div>
                                  <div class="testimonial" data-index="5">
                                  Testimonial 5
                                  </div>


                                  When we want to access those divs which has data-index greater than 2 then we need this jquery.



                                  $('div[class="testimonial"]').each(function(index,item){
                                  if(parseInt($(item).data('index'))>2){
                                  $(item).html('Testimonial '+(index+1)+' by each loop');
                                  }
                                  });


                                  Working example fiddle






                                  share|improve this answer



























                                    up vote
                                    36
                                    down vote













                                    Try this example



                                    Html



                                    <div class="testimonial" data-index="1">
                                    Testimonial 1
                                    </div>
                                    <div class="testimonial" data-index="2">
                                    Testimonial 2
                                    </div>
                                    <div class="testimonial" data-index="3">
                                    Testimonial 3
                                    </div>
                                    <div class="testimonial" data-index="4">
                                    Testimonial 4
                                    </div>
                                    <div class="testimonial" data-index="5">
                                    Testimonial 5
                                    </div>


                                    When we want to access those divs which has data-index greater than 2 then we need this jquery.



                                    $('div[class="testimonial"]').each(function(index,item){
                                    if(parseInt($(item).data('index'))>2){
                                    $(item).html('Testimonial '+(index+1)+' by each loop');
                                    }
                                    });


                                    Working example fiddle






                                    share|improve this answer

























                                      up vote
                                      36
                                      down vote










                                      up vote
                                      36
                                      down vote









                                      Try this example



                                      Html



                                      <div class="testimonial" data-index="1">
                                      Testimonial 1
                                      </div>
                                      <div class="testimonial" data-index="2">
                                      Testimonial 2
                                      </div>
                                      <div class="testimonial" data-index="3">
                                      Testimonial 3
                                      </div>
                                      <div class="testimonial" data-index="4">
                                      Testimonial 4
                                      </div>
                                      <div class="testimonial" data-index="5">
                                      Testimonial 5
                                      </div>


                                      When we want to access those divs which has data-index greater than 2 then we need this jquery.



                                      $('div[class="testimonial"]').each(function(index,item){
                                      if(parseInt($(item).data('index'))>2){
                                      $(item).html('Testimonial '+(index+1)+' by each loop');
                                      }
                                      });


                                      Working example fiddle






                                      share|improve this answer














                                      Try this example



                                      Html



                                      <div class="testimonial" data-index="1">
                                      Testimonial 1
                                      </div>
                                      <div class="testimonial" data-index="2">
                                      Testimonial 2
                                      </div>
                                      <div class="testimonial" data-index="3">
                                      Testimonial 3
                                      </div>
                                      <div class="testimonial" data-index="4">
                                      Testimonial 4
                                      </div>
                                      <div class="testimonial" data-index="5">
                                      Testimonial 5
                                      </div>


                                      When we want to access those divs which has data-index greater than 2 then we need this jquery.



                                      $('div[class="testimonial"]').each(function(index,item){
                                      if(parseInt($(item).data('index'))>2){
                                      $(item).html('Testimonial '+(index+1)+' by each loop');
                                      }
                                      });


                                      Working example fiddle







                                      share|improve this answer














                                      share|improve this answer



                                      share|improve this answer








                                      edited Feb 19 '17 at 11:46









                                      SaeX

                                      7,43444969




                                      7,43444969










                                      answered Apr 13 '15 at 7:08









                                      Manoj

                                      3,45421646




                                      3,45421646






















                                          up vote
                                          26
                                          down vote













                                          you can do it this way



                                          $('.testimonial').each(function(index, obj){
                                          //you can use this to access the current item
                                          });





                                          share|improve this answer



























                                            up vote
                                            26
                                            down vote













                                            you can do it this way



                                            $('.testimonial').each(function(index, obj){
                                            //you can use this to access the current item
                                            });





                                            share|improve this answer

























                                              up vote
                                              26
                                              down vote










                                              up vote
                                              26
                                              down vote









                                              you can do it this way



                                              $('.testimonial').each(function(index, obj){
                                              //you can use this to access the current item
                                              });





                                              share|improve this answer














                                              you can do it this way



                                              $('.testimonial').each(function(index, obj){
                                              //you can use this to access the current item
                                              });






                                              share|improve this answer














                                              share|improve this answer



                                              share|improve this answer








                                              edited Jan 19 '11 at 12:49

























                                              answered Jan 19 '11 at 12:44









                                              Ghyath Serhal

                                              5,57263750




                                              5,57263750






















                                                  up vote
                                                  17
                                                  down vote













                                                  divs  = $('.testimonial')
                                                  for(ind in divs){
                                                  div = divs[ind];
                                                  //do whatever you want
                                                  }





                                                  share|improve this answer





















                                                  • that doesn't give you the jquery objects though, just dom elements
                                                    – celwell
                                                    Feb 3 '14 at 19:25










                                                  • @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                                                    – GoldBishop
                                                    Nov 17 '17 at 17:34















                                                  up vote
                                                  17
                                                  down vote













                                                  divs  = $('.testimonial')
                                                  for(ind in divs){
                                                  div = divs[ind];
                                                  //do whatever you want
                                                  }





                                                  share|improve this answer





















                                                  • that doesn't give you the jquery objects though, just dom elements
                                                    – celwell
                                                    Feb 3 '14 at 19:25










                                                  • @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                                                    – GoldBishop
                                                    Nov 17 '17 at 17:34













                                                  up vote
                                                  17
                                                  down vote










                                                  up vote
                                                  17
                                                  down vote









                                                  divs  = $('.testimonial')
                                                  for(ind in divs){
                                                  div = divs[ind];
                                                  //do whatever you want
                                                  }





                                                  share|improve this answer












                                                  divs  = $('.testimonial')
                                                  for(ind in divs){
                                                  div = divs[ind];
                                                  //do whatever you want
                                                  }






                                                  share|improve this answer












                                                  share|improve this answer



                                                  share|improve this answer










                                                  answered Jan 19 '11 at 12:45









                                                  ikostia

                                                  3,20052234




                                                  3,20052234












                                                  • that doesn't give you the jquery objects though, just dom elements
                                                    – celwell
                                                    Feb 3 '14 at 19:25










                                                  • @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                                                    – GoldBishop
                                                    Nov 17 '17 at 17:34


















                                                  • that doesn't give you the jquery objects though, just dom elements
                                                    – celwell
                                                    Feb 3 '14 at 19:25










                                                  • @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                                                    – GoldBishop
                                                    Nov 17 '17 at 17:34
















                                                  that doesn't give you the jquery objects though, just dom elements
                                                  – celwell
                                                  Feb 3 '14 at 19:25




                                                  that doesn't give you the jquery objects though, just dom elements
                                                  – celwell
                                                  Feb 3 '14 at 19:25












                                                  @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                                                  – GoldBishop
                                                  Nov 17 '17 at 17:34




                                                  @celwell can't expect jQuery to do everything for you. It is a matter of making your own jQuery Object $(ind).
                                                  – GoldBishop
                                                  Nov 17 '17 at 17:34










                                                  up vote
                                                  13
                                                  down vote













                                                  You can do this concisely using .filter. The following example will hide all .testimonial divs containing the word "something":



                                                  $(".testimonial").filter(function() {
                                                  return $(this).text().toLowerCase().indexOf("something") !== -1;
                                                  }).hide();





                                                  share|improve this answer

























                                                    up vote
                                                    13
                                                    down vote













                                                    You can do this concisely using .filter. The following example will hide all .testimonial divs containing the word "something":



                                                    $(".testimonial").filter(function() {
                                                    return $(this).text().toLowerCase().indexOf("something") !== -1;
                                                    }).hide();





                                                    share|improve this answer























                                                      up vote
                                                      13
                                                      down vote










                                                      up vote
                                                      13
                                                      down vote









                                                      You can do this concisely using .filter. The following example will hide all .testimonial divs containing the word "something":



                                                      $(".testimonial").filter(function() {
                                                      return $(this).text().toLowerCase().indexOf("something") !== -1;
                                                      }).hide();





                                                      share|improve this answer












                                                      You can do this concisely using .filter. The following example will hide all .testimonial divs containing the word "something":



                                                      $(".testimonial").filter(function() {
                                                      return $(this).text().toLowerCase().indexOf("something") !== -1;
                                                      }).hide();






                                                      share|improve this answer












                                                      share|improve this answer



                                                      share|improve this answer










                                                      answered Jan 19 '11 at 12:53









                                                      karim79

                                                      293k54378386




                                                      293k54378386






















                                                          up vote
                                                          13
                                                          down vote













                                                          jQuery's .eq() can help you traverse through elements with an indexed approach.



                                                          var testimonialElements = $(".testimonial");
                                                          for(var i=0; i<testimonialElements.length; i++){
                                                          var element = testimonialElements.eq(i);
                                                          //do something with element
                                                          }





                                                          share|improve this answer

















                                                          • 1




                                                            this is the most efficient approach indeed.
                                                            – Amin Setayeshfar
                                                            Jan 20 '17 at 1:00















                                                          up vote
                                                          13
                                                          down vote













                                                          jQuery's .eq() can help you traverse through elements with an indexed approach.



                                                          var testimonialElements = $(".testimonial");
                                                          for(var i=0; i<testimonialElements.length; i++){
                                                          var element = testimonialElements.eq(i);
                                                          //do something with element
                                                          }





                                                          share|improve this answer

















                                                          • 1




                                                            this is the most efficient approach indeed.
                                                            – Amin Setayeshfar
                                                            Jan 20 '17 at 1:00













                                                          up vote
                                                          13
                                                          down vote










                                                          up vote
                                                          13
                                                          down vote









                                                          jQuery's .eq() can help you traverse through elements with an indexed approach.



                                                          var testimonialElements = $(".testimonial");
                                                          for(var i=0; i<testimonialElements.length; i++){
                                                          var element = testimonialElements.eq(i);
                                                          //do something with element
                                                          }





                                                          share|improve this answer












                                                          jQuery's .eq() can help you traverse through elements with an indexed approach.



                                                          var testimonialElements = $(".testimonial");
                                                          for(var i=0; i<testimonialElements.length; i++){
                                                          var element = testimonialElements.eq(i);
                                                          //do something with element
                                                          }






                                                          share|improve this answer












                                                          share|improve this answer



                                                          share|improve this answer










                                                          answered Dec 9 '13 at 6:02









                                                          Atharva

                                                          3,87331830




                                                          3,87331830








                                                          • 1




                                                            this is the most efficient approach indeed.
                                                            – Amin Setayeshfar
                                                            Jan 20 '17 at 1:00














                                                          • 1




                                                            this is the most efficient approach indeed.
                                                            – Amin Setayeshfar
                                                            Jan 20 '17 at 1:00








                                                          1




                                                          1




                                                          this is the most efficient approach indeed.
                                                          – Amin Setayeshfar
                                                          Jan 20 '17 at 1:00




                                                          this is the most efficient approach indeed.
                                                          – Amin Setayeshfar
                                                          Jan 20 '17 at 1:00










                                                          up vote
                                                          8
                                                          down vote













                                                          I may be missing part of the question, but I believe you can simply do this:



                                                          $('.testimonial').each(function() {
                                                          if(...Condition...) {
                                                          ...Do Stuff...
                                                          }
                                                          }





                                                          share|improve this answer

























                                                            up vote
                                                            8
                                                            down vote













                                                            I may be missing part of the question, but I believe you can simply do this:



                                                            $('.testimonial').each(function() {
                                                            if(...Condition...) {
                                                            ...Do Stuff...
                                                            }
                                                            }





                                                            share|improve this answer























                                                              up vote
                                                              8
                                                              down vote










                                                              up vote
                                                              8
                                                              down vote









                                                              I may be missing part of the question, but I believe you can simply do this:



                                                              $('.testimonial').each(function() {
                                                              if(...Condition...) {
                                                              ...Do Stuff...
                                                              }
                                                              }





                                                              share|improve this answer












                                                              I may be missing part of the question, but I believe you can simply do this:



                                                              $('.testimonial').each(function() {
                                                              if(...Condition...) {
                                                              ...Do Stuff...
                                                              }
                                                              }






                                                              share|improve this answer












                                                              share|improve this answer



                                                              share|improve this answer










                                                              answered Jan 19 '11 at 12:45









                                                              David Smith

                                                              13.1k93360




                                                              13.1k93360






















                                                                  up vote
                                                                  8
                                                                  down vote













                                                                  With a simple for loop:



                                                                  var testimonials= $('.testimonial');
                                                                  for (var i = 0; i < testimonials.length; i++) {
                                                                  // Using $() to re-wrap the element.
                                                                  $(testimonials[i]).text('a');
                                                                  }





                                                                  share|improve this answer

























                                                                    up vote
                                                                    8
                                                                    down vote













                                                                    With a simple for loop:



                                                                    var testimonials= $('.testimonial');
                                                                    for (var i = 0; i < testimonials.length; i++) {
                                                                    // Using $() to re-wrap the element.
                                                                    $(testimonials[i]).text('a');
                                                                    }





                                                                    share|improve this answer























                                                                      up vote
                                                                      8
                                                                      down vote










                                                                      up vote
                                                                      8
                                                                      down vote









                                                                      With a simple for loop:



                                                                      var testimonials= $('.testimonial');
                                                                      for (var i = 0; i < testimonials.length; i++) {
                                                                      // Using $() to re-wrap the element.
                                                                      $(testimonials[i]).text('a');
                                                                      }





                                                                      share|improve this answer












                                                                      With a simple for loop:



                                                                      var testimonials= $('.testimonial');
                                                                      for (var i = 0; i < testimonials.length; i++) {
                                                                      // Using $() to re-wrap the element.
                                                                      $(testimonials[i]).text('a');
                                                                      }






                                                                      share|improve this answer












                                                                      share|improve this answer



                                                                      share|improve this answer










                                                                      answered Jan 20 '17 at 15:00









                                                                      Ismail Rubad

                                                                      7191621




                                                                      7191621






















                                                                          up vote
                                                                          7
                                                                          down vote













                                                                          Without jQuery updated






                                                                          document.querySelectorAll('.testimonial').forEach(function (element, index) {
                                                                          element.innerHTML = 'Testimonial ' + (index + 1);
                                                                          });

                                                                          <div class="testimonial"></div>
                                                                          <div class="testimonial"></div>








                                                                          share|improve this answer





















                                                                          • almost the same answer is already here, I think you should edit existing
                                                                            – Oleh Rybalchenko
                                                                            Oct 3 '17 at 8:18















                                                                          up vote
                                                                          7
                                                                          down vote













                                                                          Without jQuery updated






                                                                          document.querySelectorAll('.testimonial').forEach(function (element, index) {
                                                                          element.innerHTML = 'Testimonial ' + (index + 1);
                                                                          });

                                                                          <div class="testimonial"></div>
                                                                          <div class="testimonial"></div>








                                                                          share|improve this answer





















                                                                          • almost the same answer is already here, I think you should edit existing
                                                                            – Oleh Rybalchenko
                                                                            Oct 3 '17 at 8:18













                                                                          up vote
                                                                          7
                                                                          down vote










                                                                          up vote
                                                                          7
                                                                          down vote









                                                                          Without jQuery updated






                                                                          document.querySelectorAll('.testimonial').forEach(function (element, index) {
                                                                          element.innerHTML = 'Testimonial ' + (index + 1);
                                                                          });

                                                                          <div class="testimonial"></div>
                                                                          <div class="testimonial"></div>








                                                                          share|improve this answer












                                                                          Without jQuery updated






                                                                          document.querySelectorAll('.testimonial').forEach(function (element, index) {
                                                                          element.innerHTML = 'Testimonial ' + (index + 1);
                                                                          });

                                                                          <div class="testimonial"></div>
                                                                          <div class="testimonial"></div>








                                                                          document.querySelectorAll('.testimonial').forEach(function (element, index) {
                                                                          element.innerHTML = 'Testimonial ' + (index + 1);
                                                                          });

                                                                          <div class="testimonial"></div>
                                                                          <div class="testimonial"></div>





                                                                          document.querySelectorAll('.testimonial').forEach(function (element, index) {
                                                                          element.innerHTML = 'Testimonial ' + (index + 1);
                                                                          });

                                                                          <div class="testimonial"></div>
                                                                          <div class="testimonial"></div>






                                                                          share|improve this answer












                                                                          share|improve this answer



                                                                          share|improve this answer










                                                                          answered Oct 3 '17 at 7:50









                                                                          KrisInception

                                                                          9515




                                                                          9515












                                                                          • almost the same answer is already here, I think you should edit existing
                                                                            – Oleh Rybalchenko
                                                                            Oct 3 '17 at 8:18


















                                                                          • almost the same answer is already here, I think you should edit existing
                                                                            – Oleh Rybalchenko
                                                                            Oct 3 '17 at 8:18
















                                                                          almost the same answer is already here, I think you should edit existing
                                                                          – Oleh Rybalchenko
                                                                          Oct 3 '17 at 8:18




                                                                          almost the same answer is already here, I think you should edit existing
                                                                          – Oleh Rybalchenko
                                                                          Oct 3 '17 at 8:18










                                                                          up vote
                                                                          6
                                                                          down vote













                                                                          $('.testimonal').each(function(i,v){
                                                                          if (condition) {
                                                                          doSomething();
                                                                          }
                                                                          });





                                                                          share|improve this answer

























                                                                            up vote
                                                                            6
                                                                            down vote













                                                                            $('.testimonal').each(function(i,v){
                                                                            if (condition) {
                                                                            doSomething();
                                                                            }
                                                                            });





                                                                            share|improve this answer























                                                                              up vote
                                                                              6
                                                                              down vote










                                                                              up vote
                                                                              6
                                                                              down vote









                                                                              $('.testimonal').each(function(i,v){
                                                                              if (condition) {
                                                                              doSomething();
                                                                              }
                                                                              });





                                                                              share|improve this answer












                                                                              $('.testimonal').each(function(i,v){
                                                                              if (condition) {
                                                                              doSomething();
                                                                              }
                                                                              });






                                                                              share|improve this answer












                                                                              share|improve this answer



                                                                              share|improve this answer










                                                                              answered Jan 19 '11 at 12:44









                                                                              davin

                                                                              32.8k76273




                                                                              32.8k76273






















                                                                                  up vote
                                                                                  4
                                                                                  down vote













                                                                                  More precise:



                                                                                  $.each($('.testimonal'), function(index, value) { 
                                                                                  console.log(index + ':' + value);
                                                                                  });





                                                                                  share|improve this answer

















                                                                                  • 3




                                                                                    Why more precise?
                                                                                    – Opux
                                                                                    Jan 22 '16 at 15:36










                                                                                  • This is nice if you like reading/writing from a more functional perspective.
                                                                                    – Sgnl
                                                                                    Aug 29 '17 at 21:18















                                                                                  up vote
                                                                                  4
                                                                                  down vote













                                                                                  More precise:



                                                                                  $.each($('.testimonal'), function(index, value) { 
                                                                                  console.log(index + ':' + value);
                                                                                  });





                                                                                  share|improve this answer

















                                                                                  • 3




                                                                                    Why more precise?
                                                                                    – Opux
                                                                                    Jan 22 '16 at 15:36










                                                                                  • This is nice if you like reading/writing from a more functional perspective.
                                                                                    – Sgnl
                                                                                    Aug 29 '17 at 21:18













                                                                                  up vote
                                                                                  4
                                                                                  down vote










                                                                                  up vote
                                                                                  4
                                                                                  down vote









                                                                                  More precise:



                                                                                  $.each($('.testimonal'), function(index, value) { 
                                                                                  console.log(index + ':' + value);
                                                                                  });





                                                                                  share|improve this answer












                                                                                  More precise:



                                                                                  $.each($('.testimonal'), function(index, value) { 
                                                                                  console.log(index + ':' + value);
                                                                                  });






                                                                                  share|improve this answer












                                                                                  share|improve this answer



                                                                                  share|improve this answer










                                                                                  answered Jan 21 '16 at 15:27









                                                                                  Atif Tariq

                                                                                  1,7881424




                                                                                  1,7881424








                                                                                  • 3




                                                                                    Why more precise?
                                                                                    – Opux
                                                                                    Jan 22 '16 at 15:36










                                                                                  • This is nice if you like reading/writing from a more functional perspective.
                                                                                    – Sgnl
                                                                                    Aug 29 '17 at 21:18














                                                                                  • 3




                                                                                    Why more precise?
                                                                                    – Opux
                                                                                    Jan 22 '16 at 15:36










                                                                                  • This is nice if you like reading/writing from a more functional perspective.
                                                                                    – Sgnl
                                                                                    Aug 29 '17 at 21:18








                                                                                  3




                                                                                  3




                                                                                  Why more precise?
                                                                                  – Opux
                                                                                  Jan 22 '16 at 15:36




                                                                                  Why more precise?
                                                                                  – Opux
                                                                                  Jan 22 '16 at 15:36












                                                                                  This is nice if you like reading/writing from a more functional perspective.
                                                                                  – Sgnl
                                                                                  Aug 29 '17 at 21:18




                                                                                  This is nice if you like reading/writing from a more functional perspective.
                                                                                  – Sgnl
                                                                                  Aug 29 '17 at 21:18










                                                                                  up vote
                                                                                  2
                                                                                  down vote













                                                                                  In JavaScript ES6 using spread ... operator



                                                                                  [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                  el.style.color = 'red';
                                                                                  });


                                                                                  over a array-like collection given by Element.querySelectorAll()






                                                                                  [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                  el.style.color = 'red';
                                                                                  const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                                                                                  console.log( stuff );
                                                                                  });

                                                                                  <p class="testimonial" id="1">This is some text</p>

                                                                                  <div class="testimonial" id="2">Lorem ipsum</div>








                                                                                  share|improve this answer



























                                                                                    up vote
                                                                                    2
                                                                                    down vote













                                                                                    In JavaScript ES6 using spread ... operator



                                                                                    [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                    el.style.color = 'red';
                                                                                    });


                                                                                    over a array-like collection given by Element.querySelectorAll()






                                                                                    [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                    el.style.color = 'red';
                                                                                    const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                                                                                    console.log( stuff );
                                                                                    });

                                                                                    <p class="testimonial" id="1">This is some text</p>

                                                                                    <div class="testimonial" id="2">Lorem ipsum</div>








                                                                                    share|improve this answer

























                                                                                      up vote
                                                                                      2
                                                                                      down vote










                                                                                      up vote
                                                                                      2
                                                                                      down vote









                                                                                      In JavaScript ES6 using spread ... operator



                                                                                      [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                      el.style.color = 'red';
                                                                                      });


                                                                                      over a array-like collection given by Element.querySelectorAll()






                                                                                      [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                      el.style.color = 'red';
                                                                                      const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                                                                                      console.log( stuff );
                                                                                      });

                                                                                      <p class="testimonial" id="1">This is some text</p>

                                                                                      <div class="testimonial" id="2">Lorem ipsum</div>








                                                                                      share|improve this answer














                                                                                      In JavaScript ES6 using spread ... operator



                                                                                      [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                      el.style.color = 'red';
                                                                                      });


                                                                                      over a array-like collection given by Element.querySelectorAll()






                                                                                      [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                      el.style.color = 'red';
                                                                                      const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                                                                                      console.log( stuff );
                                                                                      });

                                                                                      <p class="testimonial" id="1">This is some text</p>

                                                                                      <div class="testimonial" id="2">Lorem ipsum</div>








                                                                                      [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                      el.style.color = 'red';
                                                                                      const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                                                                                      console.log( stuff );
                                                                                      });

                                                                                      <p class="testimonial" id="1">This is some text</p>

                                                                                      <div class="testimonial" id="2">Lorem ipsum</div>





                                                                                      [...document.querySelectorAll('.testimonial')].forEach( el => {
                                                                                      el.style.color = 'red';
                                                                                      const stuff = `Element ${el.tagName} with ID #${el.id} says: ${el.textContent}`;
                                                                                      console.log( stuff );
                                                                                      });

                                                                                      <p class="testimonial" id="1">This is some text</p>

                                                                                      <div class="testimonial" id="2">Lorem ipsum</div>






                                                                                      share|improve this answer














                                                                                      share|improve this answer



                                                                                      share|improve this answer








                                                                                      edited Jan 4 at 22:18

























                                                                                      answered Jan 4 at 22:12









                                                                                      Roko C. Buljan

                                                                                      125k21187222




                                                                                      125k21187222






























                                                                                          draft saved

                                                                                          draft discarded




















































                                                                                          Thanks for contributing an answer to Stack Overflow!


                                                                                          • Please be sure to answer the question. Provide details and share your research!

                                                                                          But avoid



                                                                                          • Asking for help, clarification, or responding to other answers.

                                                                                          • Making statements based on opinion; back them up with references or personal experience.


                                                                                          To learn more, see our tips on writing great answers.





                                                                                          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                                                                                          Please pay close attention to the following guidance:


                                                                                          • Please be sure to answer the question. Provide details and share your research!

                                                                                          But avoid



                                                                                          • Asking for help, clarification, or responding to other answers.

                                                                                          • Making statements based on opinion; back them up with references or personal experience.


                                                                                          To learn more, see our tips on writing great answers.




                                                                                          draft saved


                                                                                          draft discarded














                                                                                          StackExchange.ready(
                                                                                          function () {
                                                                                          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f4735342%2fjquery-to-loop-through-elements-with-the-same-class%23new-answer', 'question_page');
                                                                                          }
                                                                                          );

                                                                                          Post as a guest















                                                                                          Required, but never shown





















































                                                                                          Required, but never shown














                                                                                          Required, but never shown












                                                                                          Required, but never shown







                                                                                          Required, but never shown

































                                                                                          Required, but never shown














                                                                                          Required, but never shown












                                                                                          Required, but never shown







                                                                                          Required, but never shown







                                                                                          Popular posts from this blog

                                                                                          Guess what letter conforming each word

                                                                                          Port of Spain

                                                                                          Run scheduled task as local user group (not BUILTIN)