2012-04-13 15 views
11

इम निम्नलिखित jQuery स्क्रिप्ट के साथ मेरी ली तत्वों की गिनती के साथ दिखाई दे रहे हैं:गणना ली तत्वों कि jQuery

HTML:

<ul class="relatedelements"> 
    <li style="display:none;" class="1">anything</li> 
    <li style="display:none;" class="2">anything</li> 
    <li style="display:none;" class="3">anything</li> 
</ul> 

jQuery:

$(function() { 
     var numrelated=$('.relatedelements > li').length; 
     $('.num-relatedelements').html(numrelated); 
    }); 

- > स्क्रिप्ट रिटर्न:

मैं ली तत्वों में से कुछ की style="display: none" संपत्ति में बदलाव होने पर साथ $(document).ready jQuery, जैसे: $('.2').show();

मैं अब निम्न स्क्रिप्ट के साथ ही दिखाई ली तत्वों गिनती करने के लिए एक तरह से स्क्रिप्ट को बदलना चाहते हैं (मैं बस कहा: दिखाई jQuery डॉक्स) निम्नलिखित:

$(function() { 
     var numrelated=$('.relatedelements > li:visible').length; 
     $('.num-relatedelements').html(numrelated); 
    }); 

-> स्क्रिप्ट रिटर्न: कुछ भी नहीं

क्यों यह काम नहीं करता मैं कोई सुराग नहीं है ओ ut - शायद किसी के पास कोई सुझाव या विचार है? किसी भी मदद की बहुत सराहना की है। धन्यवाद अग्रिम!

+0

** सभी को धन्यवाद! ** मैं तो लगता है , मेरी समस्या कोड में कहीं और है - हालांकि यह अजीब है, क्योंकि couting स्क्रिप्ट काम कर रही है, लेकिन जब मैं 'दृश्यमान' जोड़ता हूं तो यह दुर्घटनाग्रस्त हो जाता है। हालांकि अब मैं एक वर्कअराउंड का उपयोग कर रहा हूं। जब मैं डिस्प्ले बदलता हूं: कोई भी सीएसएस प्रॉपर्टी मैं दिखाई देने वाले ली तत्वों के लिए क्लास '.addClass (" countme ") जोड़ रहा हूं। अब मैं सभी ली तत्वों की गणना कर रहा हूं जिनमें कक्षा 'li.countme' आपकी सहायता के लिए धन्यवाद! – Dominic

उत्तर

16

काम ठीक मुझे

$(document).ready(function(){ 
    $('.2').show(); 
    var numrelated=$('.relatedelements > li:visible').length; 
    $('.num-relatedelements').html(numrelated); 
});​ 

JsFiddle Lind के लिए: http://jsfiddle.net/xuckF/1/

+0

धन्यवाद आरवीशेयरपॉइंट। – Dominic

8

काम करता है यहाँ ठीक:

http://jsfiddle.net/jtbowden/FrPPr/ (1 दिखाई)

http://jsfiddle.net/jtbowden/FrPPr/1/ (0 दृश्यमान)

अब, वर्ग के नाम के रूप में नंबर का उपयोग कर अवैध है। (W3C Spec, बुलेट 2) कक्षा के नाम एक पत्र से शुरू होना चाहिए। हो सकता है कि उसके साथ कुशलताएं समस्याएं पैदा कर रही हैं?

इसके अलावा, मैं केवल अनुमान लगा सकता हूं कि आपकी समस्या कहीं और है। क्या आप jQuery के नवीनतम संस्करण का उपयोग कर रहे हैं? (हालांकि मेरे परीक्षणों में, यह सभी तरह से 1.3 पर वापस काम करता है, और फिर यह बिल्कुल काम नहीं करता है)

क्या आपने अपने वास्तविक कोड में "दृश्यमान" गलत वर्तनी की थी। (मैं इस से पहले किया है)

+0

आपकी युक्तियों के लिए धन्यवाद जेफ! – Dominic

1

ऐसा नहीं है कि तरह काम करता है:

$(function() { 
    var numrelated=$('.relatedelements > li:visible').length; 
    $('.num-relatedelements').html(numrelated); 
}); 

आप उदाहरण there काम कर देख सकते हैं।

+0

आपकी टिप के लिए धन्यवाद, PrimosK – Dominic

0

आपकी स्क्रिप्ट कुछ भी नहीं लौटाती है क्योंकि सभी डीआईवी छिपाए जाते हैं। जब 1 दिखाया जाता है तो यह 1 लौटाता है। ,, भले ही आप http://jsfiddle.net/vnMrQ/

+1

यह अभी भी "0" वापस आ जाएगा जब सभी छिपाए जाएंगे। –

+0

मैं सही खड़ा हूँ। – ONOZ

1

बस इस पर एक नज़र डालें।शो() तत्व दस्तावेज़ तैयार:

http://jsfiddle.net/bKyt4/

+0

मार्किन, धन्यवाद! – Dominic

1

हाँ के रूप में हर कोई पहले ही कहा गया है, यह ठीक काम करता है:

+0

आपकी युक्तियों के लिए धन्यवाद! आपकी सहायता और युक्तियों के लिए – Dominic

0

मैं बाहर इस की कोशिश की है और यह यानी मैं एक मिल काम करने के लिए लगता है '1' का नतीजा

$(function() { 
    $('.2').show(); 

    var numrelated=$('.relatedelements > li:visible').length; 
    $('.num-relatedelements').html(numrelated); 
}); 

एनबी: मैं एक विशेषता के मान के लिए संख्या होने नहीं लगता कि वैध मार्कअप

+0

धन्यवाद पीटर - मुझे लगता है कि, मेरी समस्या कहीं और है - हालांकि यह अजीब बात है, क्योंकि couting काम कर रहा है, लेकिन जब मैं जोड़ता हूं: इसे क्रैश दिखाई देता है। हालांकि अब मैं एक वर्कअराउंड का उपयोग कर रहा हूं। जब मैं डिस्प्ले बदलता हूं: कोई भी सीएसएस प्रॉपर्टी मैं दिखाई देने वाले ली तत्वों के लिए क्लास '.addClass ("countme") जोड़ रहा हूं। अब मैं सभी ली तत्वों की गिनती कर रहा हूं जिनमें कक्षा li.countme आपकी सहायता के लिए धन्यवाद! – Dominic

+0

कोई चिंता नहीं। – Peter

2

तत्व ग्रहण के रूप में छिपा है, तो उसे या उसके माता-पिता दस्तावेज़ में कोई जगह नहीं की खपत है। सीएसएस दृश्यता को ध्यान में नहीं रखा जाता है।

दृश्य:

<ul class="relatedelements"> 
    <li class="1 hidden">anything</li> 
    <li class="2 hidden">anything</li> 
    <li class="3 hidden">anything</li> 
    <li class="4">anything</li> 
    <li class="5">anything</li> 
    <li class="6">anything</li> 
    <li class="7 hidden">anything</li> 
</ul> 

<div class="num-relatedelements"></div> 

सीएसएस

.hidden { 
    display: none; 
}​ 

जे एस

$(function() { 
    var numrelated= $('.relatedelements > li:not(.hidden)').length; 
    alert(numrelated); 
    $('.num-relatedelements').html(numrelated); 
});​ 

मैं तुम्हारे लिए एक jsfiddle कर दिया है: http://jsfiddle.net/mgrcic/3BzKT/3/

+0

आपकी उत्तर के लिए धन्यवाद मदद करने में खुशी हुई। "छिपी हुई" कक्षा के विचार के साथ, अब मैं प्रत्येक तत्व को "काउंटी" जोड़ रहा हूं जिसे मैं बदल रहा हूं। शो() और यह ठीक काम करता है! – Dominic

+0

खुशी हुई इससे मदद मिली। –

0

लाइन में एक बस एक div या अवधि या पैरा जहां गिनती प्रदर्शित करना चाहते हैं परिभाषित करते हैं, और दूसरी पंक्ति में उल युक्त ली

$('.notify').html(
$('#ul-notifications li').length); 
संबंधित मुद्दे