Jquery 棘手的子选择器

这是一个简单的问题，但我无法完成。我尝试了很多不同的方法，包括这些

在这种情况下：

HTML

<div id="quiz_list_wrap"> 
    <div class="row">
        <div id=level>bla bla
        </div>
    </div>
</div>

您的点击处理程序将永远不会被调用，因为选择器

“#测验列表_wrap.row”

与任何内容都不匹配。该选择器查找具有class

行

的

#测验列表_wrap

的后代。但是您的示例HTML中有

#测验列表_wrap

本身的类

行

。（问题中的更新结构不再存在该问题。）

另外，您已经为

div

指定了

id

。因此，文档中只能有一个。要选择

div

，只需执行以下操作：

var levelDiv = $("#level");

如果您只想在它是

\quick\u list\u wrap

元素的后代时找到它，并且只想在单击时找到它，则可以使用

find

：

$(document).on("click","#quiz_list_wrap",function(event){
// ------------------ note change -----^
    var levelDiv = $(this).find("#level");
});

现在，如果您的HTML实际上是这样的（我为

行添加了一个子元素

，并将level div上的

id

更改为

类

，这样您就可以拥有多个）：

布拉布拉

…然后您的单击处理程序将被原始选择器调用，您将在处理程序中使用

$（this）.find（“div.level”）

（或只使用

$（this）.find（.level”）

）来查找它

---

最后，由于您提到了子选择器，我将提到

find

查找任何后代（子代、孙辈等）。如果你真的只想看孩子，请使用

$（this）.children（“这里的选择器”）

。

@T.J.Crowder不要大惊小怪！并选择div类级别。对不起，我忘记添加第一个子级。行。。但是它就在那里。。我将更新另一个回答varname=$（“>.level”，self）的人的线程；是的，但他在你的答案之后删除了他的答案=（@Th3B0Y:看起来我正确地猜测了你的真实结构，请参阅我在你更新问题时所写答案的更新。我建议使用

find

或

children

超过

$（“>.level”，self）

，尤其是因为后者只是转过身来调用

find

。明白了。谢谢！实际上这个表有多行，所以每行有一个#level。这就是为什么我在这一行的含义中使用$（this）。@Th3B0Y:如果每行有一个

#level

，文档无效。

$(document).on("click","#quiz_list_wrap",function(event){
// ------------------ note change -----^
    var levelDiv = $(this).find("#level");
});

<div id="quiz_list_wrap"> 
    <div class="row">
        <div class=level>bla bla
        </div>
    </div>
</div>