Question

我有一个返回HTML片段的ajax调用。我试图在渲染之前选择该片段中的div。

HTML的一个例子：

<div class="event-detail repBy-container">
    <div class="copy">.....</div>
    <div class="links">
       ....
    </div>
    <div class="contacts">
      <div class="name-brand">....</div><div class="details">...., <a href="mailto:...@....">...</a></div>
    </div>
</div>

现在出现问题：

function ajaxReturn(data) {
   alert($(data).find('.event-detail').length); <-- Returns 0
   alert($(data).find('.copy').length); <-- Returns 1
}

这是一个错误还是我做错了什么？

Answer 1

这是预期的行为。

您在div下搜索.event-detail，但没有。
您正在搜索div下的.copy并且有一个。

Answer 2

.find()只获取后代，而不是当前级别，您需要.filter()才能从当前集合中获取项目（这是您返回的内容的根源）），像这样：

function ajaxReturn(data) {
   alert($(data).filter('.event-detail').length); //<-- Returns 1
   alert($(data).find('.copy').length); //<-- Returns 1
}

如果您希望.find()在两种情况下均可使用，请将内容添加到父容器中，如下所示：

function ajaxReturn(data) {
   var parent = $("<div />").append(data);
   alert(parent.filter('.event-detail').length); //<-- Returns 1
   alert(parent.find('.copy').length); //<-- Returns 1
}

Answer 3

这取决于传递给ajaxReturn函数的内容。即data包含什么？

如果它包含您引用的HTML，那么这是预期的行为。这是因为.find()方法在当前上下文中搜索，不包括它。如果示例中的外部div是data中的外部div，那么.find()将搜索该div内部的<{1}} 。

可能的JQuery类选择器错误

3 个答案: