为什么我无法在以下场景中访问div中包含的内部div和input元素？

Question

我的网页HTML很长。供您参考，我将其放在代表性的HTML下面。像这个HTML一样，所有其他HTML都在我的网页上。

<tr class="bulkop">
  <td valign="middle">
    <p class="custom-form">
      <div class="ez-checkbox">
        <input id="practice_6_189" class="custom-check ez-hide" type="checkbox" onchange="enable_text_boxes('practice_6_189')" value="189" name="practice_topics_6[]">
      </div>
      <label>Enviornmetal Chemistry</label>
      <input type="hidden" value="Enviornmetal Chemistry" name="topic_names[189]">
    </p>
  </td>
  <td valign="middle">
    <em>Total 150</em>
    <input id="practice_6_189_1" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_189_1">
    <input type="hidden" value="150" name="practice_available_questions_6_189_1">
  </td>
  <td valign="middle">
    <em>Total 81</em>
    <input id="practice_6_189_2" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_189_2">
    <input type="hidden" value="81" name="practice_available_questions_6_189_2">
  </td>
  <td valign="middle">
    <em>Total 122</em>
    <input id="practice_6_189_3" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_189_3">
    <input type="hidden" value="122" name="practice_available_questions_6_189_3">
  </td>
</tr>
<tr class="bulkop">
  <td valign="middle">
    <p class="custom-form">
      <div class="ez-checkbox">
        <input id="practice_6_190" class="custom-check ez-hide" type="checkbox" onchange="enable_text_boxes('practice_6_190')" value="190" name="practice_topics_6[]">
      </div>
      <label>Structure of Atom</label>
      <input type="hidden" value="Structure of Atom" name="topic_names[190]">
    </p>
  </td>
  <td valign="middle">
    <em>Total 810</em>
    <input id="practice_6_190_1" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_190_1">
    <input type="hidden" value="810" name="practice_available_questions_6_190_1">
  </td>
  <td valign="middle">
    <em>Total 394</em>
    <input id="practice_6_190_2" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_190_2">
    <input type="hidden" value="394" name="practice_available_questions_6_190_2">
  </td>
  <td valign="middle">
    <em>Total 321</em>
    <input id="practice_6_190_3" class="mini" type="text" disabled="" value="" maxlength="3" name="practice_6_190_3">
    <input type="hidden" value="321" name="practice_available_questions_6_190_3">
  </td>
</tr>

为了您的参考，我只添加了两个<tr>标签。实际上我的HTML有很多这样的<tr>。现在我想访问内部div和div中包含的所有<tr>标签中包含的输入。为此，我写了下面的jQuery但不能将所述类应用于div以及div中存在的输入。我在控制台中没有收到任何错误。如果我在操纵HTML元素方面做错了，你能纠正我吗？提前致谢。我的jQuery函数代码如下：

$(document).ready(function()  { 
$("#ckbCheckAll").click(function () {   

    $('tr .bulkop td p div .ez-checkbox').toggleClass("ez-checked", this.checked);
    $('tr .bulkop td p div .ez-checkbox input').toggleClass("ez-checked", this.checked);

    var id_checkboxes = $('tr .bulkop td p div .ez-checkbox input').map(function() {
      return this.id;
    }).get();
    for (var i = 0; i < id_checkboxes.length; i++) {
      toggle_question_count('#'+id_checkboxes[i]);
    }    
  });
});

我无法切换课程。请帮我解决这个问题。

Answer 1

因为<div>内部<p>无法使用无效标记....请参阅??

Answer 2

正确的选择器不是'tr 。bulkop td p div 。ez-checkbox'，但是'tr.bulkop td p div.ez-checkbox'。这是因为指定和子选择器之间的区别：删除标记名称和类之间的空格将使选择器找到具有此标记名称和类的元素。