CODEWITHSUNDEEP
javascriptjqueryhtml
PlayHardGoPro
PlayHardGoPro

Reputation: 2923

Loop through all element child

I have this HTML: 

<ul class="my_list">
   <li>
      <h3 >Eusebio Rice</h3>                
      <ul class="my_sublist">
         <li data-time="14:30:00">Discipline I</li>
         <li data-time="14:30:00">Discipline II</li>                                        
      </ul>
   </li>
</ul>

I need the loop through all my_sublist child AND throw it's text (discipline's name) into a table.

What I could do was to throw only ONE child into the table.

I'd like to ask a more fancy way to do this (my way seems really ugly and wrong). 

var discipline_time = $(this).next().find('li').data('time');
if(discipline_time == "14:30:00"){
            var myRow = document.getElementById("prof-table").rows[3];  

            if(myRow.cells.length <= 1){
                $(this).next().find('li').each(function(idx, elm){
                    myRow.insertCell(idx + 1);
                    myRow.cells[idx + 1].innerHTML = $(elm).text();
                });             
            }
            else{
                while(myRow.cells.length > 1)
                myRow.deleteCell(1);
            }


        }

Table: 

<table id="prof-table">
   <tbody>
      <tr>
         <th>HORÁRIO</th>
         <th data-dia="seg">Sunday</th>
         <th data-dia="ter">Tuesday</th>
         <th data-dia="qua">Wednesday</th>
         <th data-dia="qui">Thursday</th>
         <th data-dia="sex">Friday</th>                 
      </tr>
      <tr>
         <td>08:30 ~ 10:30</td>
      </tr>
      <tr>
         <td>10:30 ~ 12:30</td>
      </tr>
      <tr>
         <td>14:30 ~ 16:30</td>
      </tr>

   </tbody>
</table>

So what I need to do is to recognize the discipline time and throw it into the right place of the table. But I don't know how to:

Upvotes: 0

Views: 209

Answers (3)

kennasoft
kennasoft

Reputation: 1593

Take a look at the solution in this fiddle. I've explained some of the steps taken in comments. If you are not still clear, please drop a comment.

Javascript:

$(function () {
    $("#btn-allocate").click(function () {
        var mySublists = $(".my_list .my_sublist"); //get all sublists
        var disciplines = mySublists.find('li'); //get all list items
        var profTable = $('#prof-table');
        var ranges = profTable.find("tr td:first-child");   //take the first columns
        console.log(ranges);
        //hint: you may need to read up array.map()
        ranges = ranges.map(function(idx, row){
            var time_period = $(row).text().split(' ~ ');   //split the columns data to start and stop time
            //create a new object that keeps the time range and index
            return {index: idx, from: time_period[0], to: time_period[1]};
        });
        console.log(ranges);
        //loop through all the disciplines and get their name and time
        $.each(disciplines, function(indx, discipline){
            var discipline_time = $(discipline).data('time');   //get the discipline time
            var discipline_name = $(discipline).html();
            //scan through the time ranges and decide which row to fill with that discipline
            $.each(ranges, function(indx, range){
                //check what range the discipline falls into
                if((range.from+":00")<=discipline_time && (range.to+"00")>discipline_time){
                    var row = profTable.find("tr:eq("+(range.index+1)+")"); //added one to the index to skip the header row
                    row.find("td").each(function(indx, cell){
                        if(indx==0) return true;
                        if($(cell).html()=="") $(cell).append("<ol></ol>");
                        //use append in case multiple disciplines fall within the time
                        $(cell).find('ol').append("<li>"+discipline_name+"</li>");
                    });
                    //stop iterating
                    return false;
                }
            });
        });
    });
});

HTML:

<body>
<table id="prof-table" border="1">
<tbody>
    <tr>
        <th>HORÁRIO</th>
        <th data-dia="seg">Sunday</th>
        <th data-dia="ter">Tuesday</th>
        <th data-dia="qua">Wednesday</th>
        <th data-dia="qui">Thursday</th>
        <th data-dia="sex">Friday</th>
    </tr>
    <tr>
        <td>08:30 ~ 10:30</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>10:30 ~ 12:30</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>14:30 ~ 16:30</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>
</table>
<ul class="my_list">
    <li>
     <h3>Eusebio Rice</h3> 
    <ul class="my_sublist">
        <li data-time="10:30:00">Discipline1</li>
        <li data-time="08:30:00">Discipline2</li>
    </ul>
</li>
<li>
     <h3>Eusebio Rice 2</h3> 
    <ul class="my_sublist">
        <li data-time="10:30:00">Discipline3</li>
        <li data-time="14:30:00">Discipline4</li>
    </ul>
</li>
</ul>
<input type="button" id="btn-allocate" value="Allocate" />
</body>

Upvotes: 1

mwilson
mwilson

Reputation: 12900

You can leverage jquery and use the .each function to loop through your li tags and do whatever you want with it.

$(document).ready(function () {
    $('#btnGo').on('click', function () {

        $('.my_sublist > li').each(function () {
            var discipline = $(this).text();
            console.log(discipline);
        });

    });

});

If you want to throw it into the other table, I'm assuming that you're wanting to position it within it's proper time slot. This will require some extra work on your end to basically do the math and figure out which cell to place it in. I'm not sure how you plan on handling the day of the week, however...

Upvotes: 1

Josh
Josh

Reputation: 1474

I know this is where you type a answer... but i feel like I'm cheating if the question being asked is simple. Try using a for statement based on how many children sub_list have. Your using jQuery, I have faith.

for example:

for(i = 0; i < childeren.count; i++){
   Arugment....
}

Upvotes: 0

Related Questions