如何获取ajax调用返回的元素数
How to get number of elements returned from ajax call?
我使用这种方法来获取ajax调用返回的li
的数量:
$.post('@Url.Action("actionName", "controller")', function (data) {
$('#notificationCounter').html($(data).find('li').length);
});
结果如下:
<li>
<a href="#">
<div class="row">
<div class="col-xs-4">
<img src="/Content/Images/UserPhotos/nofile.png" alt="profile">
</div>
<div class="col-xs-8 new-class">
<span>...</span>
<div>
<span>..</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-xs-4">
<img src="/Content/Images/UserPhotos/nofile.png" alt="profile">
</div>
<div class="col-xs-8 new-class">
<span>...</span>
<div>
<span>..</span>
</div>
</div>
</div>
</a>
</li>
例如,对于那个结果,我应该得到2,因为结果返回了两个li
,但我得到了0
知道吗?
find
查找子代元素,但您的li
元素是您正在创建的jQuery集的顶级元素。
您可以使用filter("li").length
:添加这些
var elements = $(data);
$('#notificationCounter').html(
elements.filter('li').length + elements.find('li').length
);
或者,如果不想计算子代li
元素(在HTML示例中没有),只需使用不带.find
的.filter
。
无偿的实例:
var data =
'<li>' +
' <a href="#">' +
' <div class="row">' +
' <div class="col-xs-4">' +
' <img src="/Content/Images/UserPhotos/nofile.png" alt="profile">' +
' </div>' +
' <div class="col-xs-8 new-class">' +
' <span>...</span>' +
' <div>' +
' <span>..</span>' +
' </div>' +
' </div>' +
' </div>' +
' </a>' +
'</li>' +
'<li>' +
' <a href="#">' +
' <div class="row">' +
' <div class="col-xs-4">' +
' <img src="/Content/Images/UserPhotos/nofile.png" alt="profile">' +
' </div>' +
' <div class="col-xs-8 new-class">' +
' <span>...</span>' +
' <div>' +
' <span>..</span>' +
' </div>' +
' </div>' +
' </div>' +
' </a>' +
'</li>';
var elements = $(data);
$('#notificationCounter').html(
".filter plus .find: " +
(elements.filter('li').length + elements.find('li').length) +
"<br>.filter alone: " +
elements.filter('li').length
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="notificationCounter"></div>
怎么样
$('#notificationCounter').html($(data).length);
因为列表项是结果中的顶级元素,所以只需检查保存数据的jquery对象的长度即可。
哦,我迟到了:(同样的答案:http://jsfiddle.net/dz1cz9nm/
测试代码的HTML数据:
<div id="datastore">
<li>
<a href="#">
<div class="row">
<div class="col-xs-4">
<img src="/Content/Images/UserPhotos/nofile.png" alt="profile" />
</div>
<div class="col-xs-8 new-class">
<span>...</span>
<div>
<span>..</span>
</div>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="row">
<div class="col-xs-4">
<img src="/Content/Images/UserPhotos/nofile.png" alt="profile" />
</div>
<div class="col-xs-8 new-class">
<span>...</span>
<div>
<span>..</span>
</div>
</div>
</div>
</a>
</li>
</div>
Javscript代码:
var data = $("#datastore").html();
alert($(data).filter('li').length + $(data).find('li').length)
至少我希望这个链接和代码将帮助您调试未来的代码,因为您可以在线测试它:)
相关文章:
- 如何从ajax调用返回.wrap()元素
- 在刚刚调用的append函数之后,jquery.height()不会返回实际值
- Jquery:对返回JSON数据的php脚本的Ajax调用
- 无法在mvc视图中使用ajax调用获取操作返回的模型对象列表
- Ajax调用返回当前html页面,而不是请求的文件
- AJAX调用并在Node中获取返回数据
- 是否可以将JXBrowser显示的JS确认对话框的结果返回到调用它的JS部分
- 调用Ajax并返回响应
- 从javascript中调用的Android函数中获取值,并将其返回给js
- 我应该返回一个类似console.log()的方法调用吗
- 如何记录调用另一个函数的函数的返回值
- 为什么返回'原因'来自被拒绝的jQueryAJAX调用theable
- 如何在模式框中显示ajax调用返回的数据
- 返回调用方数据值的 jQuery 函数
- Java Servlet 总是在 AJAX GET 请求 SERVLET 时返回调用页面的 HTML 代码
- 返回调用页面javascript
- 简单的facebook注销返回调用没有访问令牌
- WScript.Shell CurrentDirectory返回调用应用程序的位置,而不是当前位置
- Angularjs $http在第一次调用ng-click后不返回调用
- 如何在AJAX中为JSON的每次返回调用引入延迟和淡出