2010-04-28 2 views
284

То, что я пытаюсь сделать, - подсчитать все элементы на текущей странице с тем же классом, а затем я буду использовать его для добавления имени для формы ввода. В основном я разрешаю пользователям нажимать на <span>, а затем, добавив еще один для более одного и того же типа элементов. Но я не могу придумать способ считать все это просто с помощью jQuery/JavaScript.jQuery подсчет элементов по классам; Каков наилучший способ реализовать это?

Я собирался тогда назвать этот товар как-то вроде name="whatever(total+1)", если у кого-то есть простой способ сделать это, я был бы чрезвычайно благодарен, поскольку JavaScript не совсем мой родной язык.

+2

первым человеком, я увидел, получил его, и я не знаю, что это был простой $ («имя_класса»). Длина, чтобы получить его. Если бы у меня было больше, чтобы дать, я бы. Не думал, чтобы это так. Я устанавливал переменные довольно много и простые вещи, такие как документы для добавления и т. Д. И т. Д. Ничего себе, я чувствую себя довольно глупым, теперь я должен был подумать о поиске .length(), чтобы увидеть, что он сказал ... спасибо для каждого кстати. – 133794m3r

+15

+1 Для того, чтобы задать вопрос, например, Yoda – jbnunn

+4

@jbnunn, что такое Йода? –

ответ

520

Если только что-то вроде:

// Gets the number of elements with class yourClass 
var numItems = $('.yourclass').length 




В качестве побочного отметить, что часто бывает полезно, чтобы проверить свойство длины, прежде чем сцепление много функций вызовов на объект jQuery, чтобы убедиться, что у нас есть какая-то работа для выполнения. Смотри ниже:

var $items = $('.myclass'); 
// Ensure we have at least one element in $items before setting up animations 
// and other resource intensive tasks. 
if($items.length) 
{ 
    $items.animate(/* */) 
    // It might also be appropriate to check that we have 2 or more 
    // elements returned by the filter-call before animating this subset of 
    // items. 
    .filter(':odd') 
     .animate(/* */) 
     .end() 
    .promise() 
    .then(function() { 
     $items.addClass('all-done'); 
    }); 
} 
+2

Просто хотел поделиться тем, что это также работает с подсчетом детей элемента, так как это я делал, когда я приземлялся здесь: 'children ('div.classname'). Length' – brs14ku

+0

Наверняка это нехорошее решение, но идеально подходит для ОП. –

12
var count = $('.' + myclassname).length; 
7

для подсчета:

$('.yourClass').length;

должны работать нормально.

хранения в переменной так же легко, как:

var count = $('.yourClass').length;

22

Получение подсчет количества элементов, которые относятся к тому же классу так же просто, как это

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function() { 
       alert($(".red").length); 
      }); 

     </script> 
    </head> 
    <body> 

     <p class="red">Test</p> 
     <p class="red">Test</p> 
     <p class="red anotherclass">Test</p> 
     <p class="red">Test</p> 
     <p class="red">Test</p> 
     <p class="red anotherclass">Test</p> 
    </body> 
</html> 
4

HTML:

<div> 
    <img src='' class='class' /> 
    <img src='' class='class' /> 
    <img src='' class='class' /> 
</div> 

JavaScript:

var numItems = $('.class').length; 

alert(numItems); 

Fiddle demo for inside only div

Смежные вопросы