Traversing with jQuery: cycle over children

Question

Hi all I have an html structure like this:

<tr>
    <td>
        <div class="sigle-sz">
            <span class="label-sz">36</span> <input class="" type="tel" value="" name="">
            <div class="available yes">
                <i aria-hidden="true" class="availablespot"></i>
            </div>
        </div> <!-- /sigle-sz -->
    </td>
    <td>
        <div class="sigle-sz">
            <span class="label-sz">38</span> <input class="" type="tel" value="" name="">
            <div class="available yes">
                <i aria-hidden="true" class="availablespot"></i>
            </div>
        </div> <!-- /sigle-sz -->
    </td>
    <td>
        <div class="sigle-sz">
            <span class="label-sz">40</span> <input class="" type="tel" value="" name="">
            <div class="available yes">
                <i aria-hidden="true" class="availablespot"></i>
            </div>
        </div> <!-- /sigle-sz -->
    </td>
</tr>

I created a jQuery function like this:

<script>
    function pippo() {

        //code here

    }

    $( document ).ready(function() {

        $( ".sigle-sz" ).on('change', function() {
            pippo();
        });
    });
</script>

I would, into the function " pippo() ", cycle the <td> elements in the <tr> tag and save the input value in a variable.

If this is the $( ".sigle-sz" ) element, how I can do this cycle?

I put here my current code: https://jsfiddle.net/ydrunbzz/

Answer 1

You can use $.each() jQuery function :

var values;  // define global var to use everywhere

function pippo(myClass) {
    $.each(("." + myClass), function (index, value) {
        values += value;
    });
}

Answer 2

Tonnes of ways to solve this with an .each() loop. I think it's important to have a very readable loop if you are new, or else you'll lose track fast.

1) global variable

2) first make sure that the data is gathered when someone writes something in the inputs!

3) the pippo function will clear the global variable "arrSigle" (short for Array Sigle), and make sure it's only filled with the current numbers written down

    $(document).ready(function () {

       //1
       var arrSigle= [];

       //2
       $( ".sigle-sz" ).find("input").on("change", function(){
            pippo();
//just FYI, the "change" only fires when an input has a new value, and lose focus
// by any means. If it annoys you to have to click out of the box for pippo()
//to run, you might want to use "onkeyup" instead of "change".
//it will fire every time someone lets go of a key while inside the input

       })

       //3
       function pippo(){
           arrSigle.length = 0; //this clears the variable
           $( ".sigle-sz" ).find("input").each(function(){
                arrSigle.push($(this).val()); 
                //this itterates over all the inputs and pushes them into the
                //global variable.
           })
           //If you want some function to run right after all the
           //numbers has been gathered, put it right under this comment.

       }
    });

We can all discuss how "efficient" this is, but considering how small your page probably is, i think it's more than justifiable to make it this simple