Question

这是一个简单的问题，但我无法完成。我尝试了很多不同的方法，包括这些方法http://api.jquery.com/child-selector/

在这种情况下：

HTML

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

的jQuery

$(document).on("click","#quiz_list_wrap .row",function(event){
    var self = $(this); // I need self for something else
    var varname = $(self > .level);
        alert(varname.html());
});

Answer 1

永远不会调用您的点击处理程序，因为选择器"#quiz_list_wrap .row"与任何内容都不匹配。该选择器会查找具有类#quiz_list_wrap的{{1}}的后代。但是，您的示例HTML中有row 本身具有类#quiz_list_wrap。 （问题中更新的结构不再存在该问题。）< / em>的

另外，您已经row和div。因此，文档中只能有一个。要选择id，只需执行以下操作：

div

如果仅想要找到它，如果它是var levelDiv = $("#level");元素的后代，并且您只想在点击时找到它，则可以使用#quiz_list_wrap执行此操作：

find

现在，如果您的HTML实际上是这样的（我已为$(document).on("click","#quiz_list_wrap",function(event){ // ------------------ note change -----^ var levelDiv = $(this).find("#level"); });添加了子元素，并将级别div上的row更改为id，那么您可以拥有更多而不是一个）：

class

...然后您的点击处理程序将使用原始选择器进行调用，并且您将在处理程序中使用<div id="quiz_list_wrap"> <div class="row"> <div class=level>bla bla </div> </div> </div>（或仅$(this).find("div.level")）来查找它。

最后，既然你说 child 选择器，我会提到$(this).find(".level")寻找任何后代（孩子，孙子等）。如果确实只想看孩子，请改用find。

棘手的儿童选择器

1 个答案: