CODEWITHSUNDEEP
javascriptjqueryarraysloopsmultidimensional-array
senectus
senectus

Reputation: 419

JavaScript/jQuery multidimensional loop

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.

Upvotes: 0

Views: 45

Answers (4)

brk
brk

Reputation: 50291

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>

Upvotes: 1

Lalit
Lalit

Reputation: 1369

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>

Upvotes: 1

sanatsathyan
sanatsathyan

Reputation: 1763

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>

Upvotes: 1

void
void

Reputation: 36703

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>

Upvotes: 1

Related Questions