JQuery ব্যবহার করে তাত্ক্ষণিক শিশু ডিভ উপাদানগুলি গণনা করুন

Question

আমার নিম্নলিখিত HTML নোড কাঠামো রয়েছে:

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

আমি তাত্ক্ষণিক শিশুদের সংখ্যা কীভাবে গণনা না foo, যে ধরনের div? উপরের উদাহরণে, ফলাফলটি দুটি ( barএবং baz) হওয়া উচিত ।

Comments

বিভিন্ন পদ্ধতির মধ্যে গতির পার্থক্য দেখতে আমি একটি জেএসপিফার পরীক্ষা যুক্ত করেছি। আমার উত্তরটি নীচে দেখুন

— মানিকান্ত

Answer 1

$("#foo > div").length

ডিভের মতো 'foo' আইডি সহ উপাদানটির সরাসরি বাচ্চারা। তারপরে উত্পাদিত মোড়ানো সেটটির আকার পুনরুদ্ধার করা।

Comments

আমি কেবল শুক্রবারে ভাবছিলাম যে কীভাবে jQuery সহ টেবিল কলামগুলি গণনা করতে পারি। আমি একটি অনুরূপ পদ্ধতির চেষ্টা আছে করব: $('#table > th').size()।

— জিম শুবার্ট

কখনও কখনও এটি কার্যকর হয় না এবং আপনাকে m ('# foo') শিশুদের () আকার () ব্যবহার করতে হবে যা এমআরকোডার অনুসারে যাইহোক দ্রুত

— 472084

যদি আমি #foo এর পরিবর্তে এটি ব্যবহার করতে চাই তবে কীভাবে এটি ব্যবহার করবেন?

— মুকেশ

@ 472084 আপনি যদি এভাবে করেন তবে এটি "স্প্যান" উপাদানটিকেও গণনা করবে। দেখুন কীভাবে প্রশ্নটি সুনির্দিষ্ট করে যে তিনি সমস্ত উপাদান নয়, কেবল "ডিভ" উপাদানগুলি গণনা করতে চান।

— এঞ্জেল ব্লাঙ্কো

Answer 2

আমি $('#foo').children().size()আরও ভাল পারফরম্যান্সের জন্য ব্যবহার করার পরামর্শ দিচ্ছি ।

আমি তৈরি করেছি jsperf পরীক্ষা গতি পার্থক্য এবং দেখতে children()পদ্ধতি অন্তত দ্বারা সন্তান নির্বাচক (#foo> DIV আছে) পদ্ধতির প্রহৃত 60% Chrome এ (ক্যানারি বিল্ড v15) 20-30% ফায়ারফক্স (V4) এ।

যাইহোক, বলা বাহুল্য, এই দুটি পদ্ধতির একই ফলাফল হয় (এই ক্ষেত্রে, 1000)।

[আপডেট] আকার () বনাম দৈর্ঘ্যের পরীক্ষা অন্তর্ভুক্ত করার জন্য আমি পরীক্ষাটি আপডেট করেছি এবং এগুলি খুব বেশি পার্থক্য করে না (ফলস্বরূপ: lengthব্যবহারটি কিছুটা দ্রুত (2%) এর চেয়ে বেশি size())

[আপডেট] দরুন ভুল মার্কআপ ওপি দেখা করতে ( 'মার্কআপ যাচাই' আমার দ্বারা আপডেট করার আগে), উভয় $("#foo > div").length& $('#foo').children().lengthফলে একই ( jsfiddle )। তবে কেবলমাত্র 'ডিভ' বাচ্চাদের পেতে সঠিক উত্তরের জন্য, একজনকে সঠিক ও উন্নত পারফরম্যান্সের জন্য শিশু নির্বাচক ব্যবহার করা উচিত

Comments

যদিও এই প্রশ্নটি কিছুক্ষণ আগে জিজ্ঞাসা করা হয়েছিল, কেবল ভাগ করে নিতে চেয়েছিলেন যাতে এটি এখন থেকে কাউকে সহায়তা করতে পারে

— মানিকান্ত

সেখানে কেবল 'ডিভ' বাচ্চাদের ফিল্টারিং করা হয় কোথায়?

— অ্যান্ড্রে তেসারকাস

.lengthআসলে এটি পছন্দসই পদ্ধতি কারণ এটিতে কোনও ফাংশন কলের ওভারহেড নেই।

— নিক আইচ

হ্যাঁ, শিশু বাছাইকারী সঠিক কারণ এটি নেটিভ সিএসএস নির্বাচক ব্যবহার করে, তাই নির্বাচনটি জাভাস্ক্রিপ্টের চেয়ে সি ++ তে লেখা হয় ... বেশ পারফরম্যান্সের পার্থক্য। এই উত্তরটি বোঝা সহজ তবে অনেক ধীর।

— mdenton8

@ মানিকান্ত হেই, খুব বিস্তারিত উপকরণ বিরক্ত করার জন্য দুঃখিত, একটি প্রশ্ন। যদি আমি $('#extraLinks').children().size()কোনও ডিভাইসে পাঠ্য বাক্সগুলি গণনা করতে পছন্দ করি (নামযুক্ত অতিরিক্ত লিঙ্কগুলি) 4যখন আমি কেবল ২ হয় তখন কেন পাই general সাধারণভাবে, আমি দৈর্ঘ্যটি 2 দিয়ে গুণ করি ... কোনও ধারণা কেন? ধন্যবাদ

— শুক্রা

Answer 3

$("#foo > div") 

আপনার সমস্ত
বাচ্চাদের সেট হয়ে গেলে #foo এর তাত্ক্ষণিক বংশদ্ভূত সমস্ত ডিভিড নির্বাচন করুন আপনি মাপের ফাংশনটি ব্যবহার করতে পারেন:

$("#foo > div").size()

অথবা আপনি ব্যবহার করতে পারেন

$("#foo > div").length

দু'জনেই আপনাকে একই ফল দেবে

Answer 4

$('#foo').children('div').length

Answer 5

এমএসকোডারদের জবাবে জেএসপিআফ ব্যবহার করে জবাব কেন কেবল ডোম নোড ব্যবহার করবেন না?

var $foo = $('#foo');
var count = $foo[0].childElementCount

আপনি এখানে পরীক্ষার চেষ্টা করতে পারেন: http://jsperf.com/jquery-child-ele-size/7

এই পদ্ধতিটি 46,095 ওপেন / সেকেন্ড পায় যখন অন্যান্য পদ্ধতিগুলি সেরা 2000 ওপেন / এস

Comments

ওপি কেবলমাত্র

— ডিভ

Answer 6

$('#foo > div').size()

Answer 7

$("#foo > div").length

jQuery এর একটি .size () ফাংশন রয়েছে যা কোনও উপাদান প্রদর্শিত হবে তার সংখ্যাটি ফিরিয়ে দেবে তবে jQuery ডকুমেন্টেশনে উল্লিখিত হিসাবে এটি ধীর গতিতে এবং দৈর্ঘ্যের সম্পত্তি হিসাবে একই মানটি প্রদান করে যাতে কেবল এটি ব্যবহার করা ভাল। দৈর্ঘ্য সম্পত্তি। এখান থেকে: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

Answer 8

var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>

Answer 9

Jquery এর সাম্প্রতিকতম সংস্করণ সহ, আপনি ব্যবহার করতে পারেন $("#superpics div").children().length।

Answer 10

var n_numTabs = $("#superpics div").size();

অথবা

var n_numTabs = $("#superpics div").length;

---

যেমনটি আগেই বলা হয়েছিল, উভয়ই একই ফলাফল দেয়।
তবে আকার () ফাংশনটি আরও jQuery "পিসি"।
আমার পৃষ্ঠায় আমার একই সমস্যা ছিল।
আপাতত, কেবল>> বাদ দিন এবং এটি সূক্ষ্মভাবে কাজ করা উচিত।

Comments

বংশোদ্ভূত নির্বাচক কেবলমাত্র তাত্ক্ষণিক শিশু নয়, এই উপাদানটির শিশু, নাতি-নাতি, নাতনী সহ # সুপার্পিক্সের সমস্ত বংশধরকে ফিরিয়ে দেবেন

— মানিকান্ত

আরও jQuery "পিসি"। মানে?

— ঘনশ্যাম লাখানী

Answer 11

$("div", "#superpics").size();

Comments

এটি সমস্ত div বংশধরদেরই গণনা করে , কেবল শিশুদেরই নয় ।

— ফেলিক্স ক্লিং

Answer 12

ডিভিড টাইপের তাত্ক্ষণিক শিশু উপাদানগুলির জন্য এটি ব্যবহার করে দেখুন

$("#foo > div")[0].children.length