jQuery - ou seja, retornando 0 crianças

Question

Rapidamente fiz esta função para um script que estou usando:

$.fn.liCount = function(){
    var i=0;
    $(this).children().each(function(){
        i++;
    });
    return Number(i);
}

problema é o IE retorna 0, alguém sabe por que?

alert( $("ul").liCount() );

editar:

<div id="prev-quotes">
    <ul id="quote-list">
        <li id="quote_content_wrapper" >
            <ul>
                <li class="quote_li">
                    <span class="service_quote"><a href="#">Web Design Services</a></span>
                    <br>
                    <span class="cost_quote"><strong>£192</strong> - <a id="7" href="#">delete</a> | <a id="7" href="#">view</a></span>
                </li>
                <li class="quote_li">
                    <span class="service_quote"><a href="#">Web Design Services</a></span>
                    <br>
                    <span class="cost_quote"><strong>£192</strong> - <a id="7" href="#">delete</a> | <a id="7" href="#">view</a></span>
                </li>
                <li class="quote_li">
                    <span class="service_quote"><a href="#">Web Design Services</a></span>
                    <br>
                    <span class="cost_quote"><strong>£192</strong> - <a id="7" href="#">delete</a> | <a id="7" href="#">view</a></span>
                </li>
            </ul>
        </li>
        <li>
            <a id="first-quote" href="#">Previous Quotes</a>
            <img height="16" width="16" id="warning" src="images/for_web/check_mark.png">
        </li>
    </ul>    
</div>

Answer 1

Você pode simplesmente usar

$("ul > li").length;

Ver Seletor de crianças (“Pai> Child”)

Se você quiser obter o número de li lado de dentro ul com id quote-list, você pode usar

$("#quote-list > li").length;

Se você quiser obter o número de li com nomes de classe Quote_li, você pode usar

$("#quote-list > li > ul > li.quote_li").length;

Answer 2

Não há nenhuma necessidade de usar return Number(i); quando você está certo i é um número.

Você não precisa ter um contador de var em tudo — não há .length em jQuery.

Por que não usar apenas o seguinte em vez disso:

$.fn.liCount = function() {
 return $(this).children('li').length;
};

É mais curto, mais rápido, mais legível, e ele funciona em todos os navegadores.

No entanto, parece um pouco verboso / desnecessário para escrever um 'plugin' para isso.Você poderia simplesmente usar algo como:

$('ul > li').length;

Answer 3

No IE 7 e 8, você precisa identificar a tag infantil

$.fn.liCount = function(){
    var i=0;
    $(this).children("li").each(function(){
        i++;
    });
    return Number(i);
}

vai funcionar. É claro que isso limita o uso do método, a menos que você passe no elemento que deseja contar como ...

    $.fn.liCount = function(elem){
        var i=0;
        $(this).children(elem).each(function(){
            i++;
        });
        return Number(i);
   }

então ligue

alerta ($ ("ul"). Locount ("li"));