Jquery to Loop Through Elements with the Same Class

jQuery to loop through elements with the same class

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.

Iterating through elements of the same class in jquery

var values = [];
$(".child_div").each(function() {
    $(this).find("input:hidden").each(function() {
        values.push($(this).val());
    });
});

Also you might get all the inputs and map them:

var values = $('.child_div input:hidden').map(function (index, el) { return $(el).val(); }).get();

Jquery loop through same elements, get content and rearrange content element by element

You're almost there, use .find:

$(document).ready(function() {  $('.category-material').each(function(index, value) {    $(this).find(".summery").append($(this).find(".iwantyou").text());  });});

h1 {  font-weight: bold;}
div {  color: blue;}
.summery {  color: red;}
p {  color: grey;}
span {  text-decoration: underline;  color: grey;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<article class="category-material">  <h1>Numerber One </h1>  <div class="summery">    <span>Here the text from iwantyou of first article should go:</span>  </div>
  <p class="iwantyou"> summery no one</p>  <p>not touched</p>
</article><hr>
<article class="category-material">  <h1> Number Two </h1>  <div class="summery">    <span>Here text from iwantyou of second article should go:</span>  </div>
  <p class="iwantyou">Summery no two</p>  <p> not touched </p>
</article>

jQuery: Loop through elements by class and create associative array

Use bracket notation.

var assoc = {};
$('.modalField').each(function() {
    let fieldName = $(this).attr('name');
    let fieldVal = $(this).val();
    assoc[fieldName] = fieldVal;
});

(Also, you should initialize your variables with let/var/const inside the function so they don't leak into the global scope.)

Loop through all div with the same class and hide text with Javascript

Loop over each of the .titleCourse elements.

You need to change imparteText to a class so you can repeat it in each DIV.

To find the imparteText DIV in the same DIV as the titleCourse, use .closest() to find the containing DIV, then .querySelector() to find the DIV with that class.

var courses = document.querySelectorAll('.titleCourse')

courses.forEach(course => {
  title = course.textContent;
  var imparte = course.closest(".home-product").querySelector('.imparteText');
  if (title.includes('Pack')) {
    imparte.style.display = 'none';
  } else {
    imparte.style.display = 'block';
  }
});

<main id="main" class="site-main home-main" role="main">

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt="Sample Image"></a>
    </div>
    <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$2000 MXN</span>
      </div>
    </div>
  </div>

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt="Sample Image"></a>
    </div>
    <h2><a class="titleCourse" href="/">Curso de guíon</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$1000 MXN</span>
      </div>
    </div>
  </div>

  <div class="home-product">
    <div class="image-container course-trailer">
      <a href="/"> <img src="./cine-6.jpg" class="home-image" alt="Sample Image"></a>
    </div>
    <h2><a class="titleCourse" href="/">Pack 4 Cursos de Cine</a></h2>
    <div class="product-info-home">
      <div class="teacher-home imparteText">Imparte </div>
      <div class="price-home">
        <span class="original-price">$2000 MXN</span>
      </div>
    </div>
  </div>

</main>

How to loop through multiple div with same class and set a different input field value from select in jQuery

If the other divs are created on button press, your event listener is not attached - it's only attached to the divs that are present on the page when you attach the listener. You could use something like this to work dynamically with newly added divs:

$(document).on('change', 'select', function() {
  var ipt = $(this).siblings('input');
  var day = $(this).parent().find('.day').val();
  var month = $(this).parent().find('.month').val();
  var year = $(this).parent().find('.year').val();
  var dmy = day + "/" + month + "/" + year;
  ipt.val(dmy);
});

https://jsfiddle.net/y499tvg1/

Edit: For your application, try this perhaps:

jQuery('.date-dropdowns').on('change', '.day,.month,.year', function() {
    var d = jQuery(this).parent().find('.day').val();
    var m = jQuery(this).parent().find('.month').val();
    var y = jQuery(this).parent().find('.year').val();
    var dmy = d + '/' + m + '/' + y;
    jQuery(this).parent().find('input[type=hidden]').val(dmy);
});

Iterate over html elements with same class using .each

The code $('.the_div_class')[0] will only get the first element that matches that selector in the DOM with that class naively, it doesn't work because it's no longer a jQuery object (hence it doesn't have the method .toggleClass()). Inside .each() you can use this to refer to the current element being iterated:

 $('.the_div_class').each(function(i, obj) {

   if("a certain condition") {

    $(this).toggleClass('other_div_class'); 

   }

 }

---

Note: To get a item by it's index in jQuery you can use .get(). For example:

 $('.the_div_class').get(0).toggleClass('other_div_class'); 

Iterate through elements with the same class and remove them

The problem is that getElementsByClassName returns a live HTMLCollection - if you remove an element from it during an iteration, the collection will change when you remove it. For example:

const foos = document.getElementsByClassName('foo');console.log(foos[1].textContent);foos[0].remove();console.log(foos[1].textContent);

<div class="foo">a</div><div class="foo">b</div><div class="foo">c</div>

loop through same class elements and assign width and height

Replace resizeDiv() with this:

function resizeDiv() {

    $('.photo').each(function() {

        var height = $(this).height();
        var width = $(this).width();

        var $imgCover = $(this).prev(); // get the previous element to the photo (the image cover)

        $imgCover.height(height);
        $imgCover.width(width);
    });

}

You were almost there, what you were missing was the .each loop

Loop through ol in jQuery and remove class and text

I see you are using JQuery - so let's stick to this.

You are looping over the ol but you want to loop over the ol's lis.
So replace

$('ol.progress').each....

by

$('ol.progress li').each....

You can remove all classes with the .removeClass() without any parameters.
But as you want to preserve the active-class you have to preserve this attribute - in my version of the code (see below) I will use a variable for this.

In addition you want to replace the HTML-part and not the text-part - so your snippet would read

$('ol.progress li').each(function () {
  var is_active = false;
  is_active = $(this).hasClass('active');
  $(this).removeClass();
  if(is_active){
    $(this).addClass('active');
  }
  var newcontent = '<a href="#">' + $(this).html() + "</a>";
  $(this).html(newcontent);
});

---

Related Topics