Question

我有一个包含教师姓名的列表，也是一个包含他们学科的子列表在html中，您可以检查每个学科是否有：
data-id =数据库中该学科的ID;
data-time =纪律开始的时间 not-done-yet =我需要找到一种方法来检查每个学科的星期几。

除了这个清单，我还有一张桌子，上面有一周的日子，也有一些时间当我点击老师的名字时，我需要得到他所有的光盘并将其扔进桌面，但它需要在正确的时间。

<ul>
   <li data-id="1">
      <h3>Professor A</h3>
      <ul class="list-disc">
         <li data-id="1" data-time="08:30:00">Discipline 1</li>
         <li data-id="2" data-time="10:30:00>discipline 2</li>
      </ul>
   </li>
   <li data-id="2">
      <h3>Professor B</h3>
      <ul class="list-disc">
         <li data-id="3" data-time="14:30:00>Discipline 3</li>
         <li data-id="4" data-time="16:30:00>discipline 1</li>
      </ul>
   </li>
</ul>

当我点击老师的名字（h3元素）时，我需要完成他所有的学科并检查它的时间插入/扔在桌子的正确位置。
这是一个codepen示例。我正在阅读有关JQuery.map和JQuery.find的内容，但我无法让它发挥作用......

我如何获得<li>

内的每个子<ul class="list-disc >...？

Answer 1

尝试

＆＃13;

/*JQuery*/
$(document).ready(function() {
  $(".prof-list h3").click(function(e) {
    if (!$(e.target).is('h3')) {
      return
    }

    var $this = $(this),
      $ul = $this.next().stop(true, true),
      $table = $('#prof-table'),
      $trs;

    $this.toggleClass('open');
    $trs = $table.find('tr').slice(3);
    $trs.find('td:gt(0)').remove();

    if ($this.hasClass('open')) {
      $ul.find('li').each(function(i) {
        var $this = $(this),
          disciplina_id = $(this).data('id'),
          disciplina_hora = $(this).data('time');
        if (disciplina_hora == "14:30:00") {
          $('<td />', {
            text: $this.text()
          }).appendTo($trs.eq(i));
        }
      })
    }

    $ul.stop().slideToggle();
  })
})

＆＃13;

/*List Style*/

.blue {
  color: blue;
}
.table {
  width: 60%;
}
.check_prof {
  display: block;
  position: absolute;
  background-color: red;
  right: 10px;
  top: 5px;
}
.prof-list {
  background-color: #004050;
  list-style: none;
  box-shadow: 0 5px 15px 1px rgba(0, 0, 0, 0.6), 0 0 200px 1px rgba(255, 255, 255, 0.5);
  margin-right: 30px;
  padding: 0;
  margin: 0;
  position: relative;
}
.prof-list li {
  list-style-type: none;
  color: #fff;
  font-family: 'Inconsolata', arial, verdana;
}
.prof-list h3 {
  display: inline-block;
  width: 90%;
  font-size: 18px;
  line-height: 34px;
  padding: 0 10px;
  color: #ecf0f1;
  cursor: pointer;
  background: linear-gradient(#003040, #002535);
  background-color: #003040;
  /*For browsers that do not support gradient*/
  position: relative;
}
.prof-name {
  font-size: 16px;
}
/*Allowing to drag /drop a new element into a professor without any discipline*/

.list-disc {
  padding: 5px 25px;
}
body {
  background: #ecf0f1;
}
/*Transition for smooth slide*/

/*Hover Effect*/

.prof-name:hover {
  -webkit-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}
/*Hiding the non active Sublists*/

.prof-list ul {
  display: none;
}
.prof-list li.active ul {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
    <h1>Teachers List</h1>

    <ul class="prof-list col-md-4">

      <li data-id=" 1">
        <h3 class="prof-name">Alan Joe
          <input type="checkbox" name="" class="check_prof" value=""/>
        </h3>
        <ul class="list-disc ui-sortable" style="display: none;">
          <li data-id="3" data-time="14:30:00" data-dia="1" class="ui-sortable-handle">Science</li>
          <li data-id="3" data-time="14:30:00" data-dia="1" class="ui-sortable-handle">Physics</li>
        </ul>
      </li>
      <li data-id=" 2">
        <h3 class="prof-name">Antonio Nunnes
          <input type="checkbox" name="" class="check_prof" value=""/>        
        </h3>
        <ul class="list-disc ui-sortable" style="display: none;">
          <li data-id="5" class="ui-sortable-handle">Math</li>
        </ul>
      </li>
      <li data-id=" 3">
        <h3 class="prof-name">Carlos Cardoso
          <input type="checkbox" name="" class="check_prof" value=""/>        
        </h3>
        <ul class="list-disc ui-sortable">
          <li data-id="6" class="ui-sortable-handle">Chemistry</li>
          <li data-id="9" class="ui-sortable-handle">Physics</li>          
        </ul>
      </li>
      <li data-id=" 4">
        <h3 class="prof-name">Joselito Vidaloka</h3>
        <ul class="list-disc ui-sortable">
          <li data-id="2" class="ui-sortable-handle">History</li>
        </ul>
      </li>
    </ul>

    <table class="col-md-6 table" id="prof-table">
      <tbody>
        <tr>
          <th>TIME</th>
          <th>Segunda-Feira</th>
          <th>Terça-Feira</th>
          <th>Quarta-Feira</th>
          <th>Quinta-Feira</th>
          <th>Sexta-Feira</th>					
        </tr>
        <tr>
          <td>8:30 ~ 10:30</td>
          <td>Physics</td>
          <td>Math</td>
          <td>Chemistry</td>
          <td>Science</td>
          <td>History</td>
        </tr>
        <tr>
          <td>10:30 ~ 12:30</td>
          <td>Physics</td>
          <td>Math</td>
          <td>Chemistry</td>
          <td>Science</td>
          <td>History</td>
        </tr>
        <tr>
          <td>14:30 ~ 16:30</td>    					
        </tr>
        <tr>
          <td>16:30 ~ 18:30</td>    
        </tr>
      </tbody></table>			
  </div>
</div>

＆＃13;

将列表中的项添加到表中的特定位置

1 个答案: