JavaScript/jQuery multidimensional loop

Question

I have HTML data in the following format:

<section class="data">

    <div class="colors">
        <span class="Red"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Red"></span>
        <span class="Blue"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Blue"></span>
        <span class="Purple"></span>
        <span class="Yellow"></span>
        <span class="Black"></span>
    </div>

</section>

<section class="results"></section>

There could be any number of elements with a class of "colors" and any number of spans inside every "colors" element.

How can I loop through the data with JS/jQuery and append the same data but in a different new format in the "results" section, like this:

<section class="results">
    <p>Red Green</p>
    <p>Red Blue Green</p>
    <p>Blue Purple Yellow Black</p>
</section>

Would I need to construct an array within an array, where the first level would contain the parents and the second level would contain the values? And if so, what would the syntax be?

Thanks.

void · Accepted Answer · 2018-02-20 05:31:31Z

You can loop through .colors using .each and then loop through span under it and fetch className property.

$(".colors").each(function(){
  var _classes = [];
  $(this).find("span").each(function(){
    _classes.push(this.className);
  });
  $(".results").append("<p>"+_classes.join(" ")+"</p>");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="data">

    <div class="colors">
        <span class="Red"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Red"></span>
        <span class="Blue"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Blue"></span>
        <span class="Purple"></span>
        <span class="Yellow"></span>
        <span class="Black"></span>
    </div>

</section>

<section class="results"></section>

sanatsathyan · Accepted Answer · 2018-02-20 05:33:03Z

you can try this, i guess

$(document).ready(function(){
  $('section.data .colors').each(function(i,v){
  
        var $p = $('<p/>');
    $(v).children().each(function(index,value){
       $p.html($p.html()+' ' +$(value).attr('class'));
    });
        $('section.results').append($p);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="data">

    <div class="colors">
        <span class="Red"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Red"></span>
        <span class="Blue"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Blue"></span>
        <span class="Purple"></span>
        <span class="Yellow"></span>
        <span class="Black"></span>
    </div>

</section>

<section class="results"></section>

Lalit · Accepted Answer · 2018-02-20 05:36:21Z

var colors = document.querySelectorAll(".colors");
var results = document.getElementsByClassName("results")[0];
//console.log(colors);
for(var i = 0; i < colors.length; i++){
  var spns = colors[i].querySelectorAll("span");
  //console.log(spns);
  var classNames = "";
  for(var j = 0; j < spns.length; j++){
    classNames += spns[j].className + " ";
  }  
  results.innerHTML += '<p>'+classNames+'</p>';
}

<section class="data">

    <div class="colors">
        <span class="Red"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Red"></span>
        <span class="Blue"></span>
        <span class="Green"></span>
    </div>

    <div class="colors">
        <span class="Blue"></span>
        <span class="Purple"></span>
        <span class="Yellow"></span>
        <span class="Black"></span>
    </div>

</section>

<section class="results"></section>

brk · Accepted Answer · 2018-02-20 05:47:31Z

You can use jquery each to loop over the DOM elements

$('.colors').each(function(i, v) {
  // Create a variable to hold the class name
  var text = '';
  // loop over the children of the parent class
  $(v).children().each(function(a, b) {
    // concat the class name and space to separate the classname
    // $(b) is an array so $(b)[0] will give first element
    text += $(b)[0].className + ' ';
  });
  // append the text to result
  $('.results').append($('<p>' + text + '</p>'))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="data">

  <div class="colors">
    <span class="Red"></span>
    <span class="Green"></span>
  </div>

  <div class="colors">
    <span class="Red"></span>
    <span class="Blue"></span>
    <span class="Green"></span>
  </div>

  <div class="colors">
    <span class="Blue"></span>
    <span class="Purple"></span>
    <span class="Yellow"></span>
    <span class="Black"></span>
  </div>

</section>

<section class="results"></section>

Collectives™ on Stack Overflow

JavaScript/jQuery multidimensional loop

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related