Question

我正在使用this方法获取从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
);

如果您不想计算后代.filter元素（HTML示例中没有任何元素），请仅使用.find而不使用li。

无偿的现场例子：

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);

因为list-items是结果中的顶级元素，所以只需检查保存数据的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)

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

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

3 个答案: