jQuery के गिनती के तत्व कक्षा में - इसे लागू करने का सबसे अच्छा तरीका क्या है?

373

मैं जो करने की कोशिश कर रहा हूं, वह वर्तमान पृष्ठ के सभी तत्वों को एक ही वर्ग के साथ गिनने के लिए है और फिर मैं इसे इनपुट फॉर्म के लिए एक नाम पर जोड़ने के लिए उपयोग करने जा रहा हूं। मूल रूप से मैं उपयोगकर्ताओं को एक पर क्लिक करने की अनुमति दे रहा हूं <span>और ऐसा करने से एक ही प्रकार की और वस्तुओं के लिए एक और जोड़ देता हूं । लेकिन मैं इन सभी को केवल jQuery / जावास्क्रिप्ट के साथ गिनने का तरीका नहीं सोच सकता।

मैं तब आइटम को कुछ इस तरह नाम देने जा रहा था name="whatever(total+1)", अगर किसी के पास यह करने का एक सरल तरीका है तो मैं बहुत आभारी रहूंगा क्योंकि जावास्क्रिप्ट वास्तव में मेरी मूल जीभ नहीं है।

— 133794m3r
स्रोत

3

पहला व्यक्ति जिसे मैंने देखा था और मुझे नहीं पता था कि यह एक साधारण $ ('क्लासनाम') था। इसे पाने के लिए लंबाई। अगर मेरे पास देने के लिए और अधिक होता। यह इस तरह की कोशिश करने के लिए नहीं सोचा था। मैं वेरिएबल्स को बहुत कम और सरल चीज़ों जैसे कि दस्तावेज़ों आदि को सेट करना आदि कर रहा हूँ। वाह मुझे बहुत अच्छा लग रहा है अब मुझे लगता है कि इसे देखने के लिए .length () कमांड के बारे में सोचना चाहिए ... यह सभी के लिए धन्यवाद। btw।

— 133794m3r

26

+1 योदा जैसे प्रश्न पूछने के लिए

— jbnunn

6

@jbnunn क्या है योदा?

— shasi kant

691

बस कुछ इस तरह होना चाहिए:

// 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');
    });
}

— PatrikAkerstrand
स्रोत

4

बस यह साझा करना चाहता था कि यह एक तत्व के बच्चों की गिनती के साथ भी काम करता है, जैसा कि जब मैं यहां उतरा था, तो मैं क्या कर रहा था: children('div.classname').length

— brs14ku

23

एक ही वर्ग को संदर्भित करने वाले तत्वों की संख्या की एक गिनती प्राप्त करना उतना ही सरल है

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

— जोनाथन
स्रोत

14

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

— मैक्स शवाबकेह
स्रोत

9

गिनती के लिए:

$('.yourClass').length;

ठीक काम करना चाहिए।

एक चर में संग्रहीत करना उतना ही आसान है:

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

— एलेस्टेयर पिट्स
स्रोत

6

HTML:

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

जावास्क्रिप्ट:

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

alert(numItems);

केवल डिव के अंदर फिडेल डेमो

— नीलेश दराडे
स्रोत

2

प्रयत्न

document.getElementsByClassName('myclass').length

कोड स्निपेट दिखाएं

let num = document.getElementsByClassName('myclass').length;
console.log('Total "myclass" elements: '+num);

.myclass { color: red }

<span class="myclass" >1</span>
<span>2</span>
<span class="myclass">3</span>
<span class="myclass">4</span>

स्निपेट का विस्तार करें

— कामिल कियॉलेजवस्की
स्रोत