如何获取ajax调用返回的元素数

Question

我使用这种方法来获取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
知道吗？

Answer 1

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>

Answer 2

怎么样

$('#notificationCounter').html($(data).length);

因为列表项是结果中的顶级元素，所以只需检查保存数据的jquery对象的长度即可。

Answer 3

哦，我迟到了：（同样的答案：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)

至少我希望这个链接和代码将帮助您调试未来的代码，因为您可以在线测试它：）