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

【问题标题】：Why am I not able to access the inner div and input element contained in div in the following scenario?为什么在以下场景中我无法访问 div 中包含的内部 div 和 input 元素？
【发布时间】：2013-10-18 16:37:22
【问题描述】：

我的网页 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>。现在我想访问页面中所有<tr>标签的内部div和div中包含的输入。为此，我编写了以下 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]);
    }    
  });
});

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

【问题讨论】：

标签： javascript html jquery-selectors jquery

【解决方案1】：

因为您不能在 <p> 中包含 <div>，这是无效标记.... 看到了吗？？

【讨论】：

你有不同的html。
@FLCL 当然，html 是不同的...如果您尝试将<div> 标签嵌套在<p> 标签内...浏览器将自动关闭<p> 标签...采取看看这个...jsfiddle.net/4w7Mn

【解决方案2】：

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

【讨论】：