Question

我有这个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>

我需要循环遍历所有my_sublist孩子并将其文本（纪律名称）扔到表格中。

我能做的就是只把一个孩子扔进餐桌。

我想问一个更奇特的方式来做这件事（我的方式似乎真的很丑陋和错误）。

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 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>

所以我需要做的是识别训练时间并把它扔到桌子的正确位置。但我不知道如何：

遍历所有.my_sublist孩子。
更好的方法来执行javascript或JQuery ......

Answer 1

您可以利用jquery并使用.each功能循环浏览li代码并随意执行任何操作。

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

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

    });

});

如果你想把它扔进另一张桌子，我假设你想要把它放在它的正确时间段内。这将需要你的一些额外的工作，基本上做数学并找出放置它的单元格。我不确定你计划如何处理星期几，但是...

Answer 2

看看solution in this fiddle。我已经解释了评论中采取的一些步骤。如果你还不清楚，请发表评论。

<强>使用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>

Answer 3

我知道这是你输入答案的地方......但如果提出的问题很简单，我觉得我会作弊。根据sub_list有多少子项，尝试使用for语句。你使用jQuery，我有信心。

例如：

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

遍历所有元素子

3 个答案: