JQuery में सूची तत्व सामग्री की एक सरणी प्राप्त करें

Question

मेरे पास इस तरह की एक संरचना है:

<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

टेक्स्ट को एरे के रूप में प्राप्त करने के लिए मैं जावास्क्रिप्ट या jQuery का उपयोग कैसे करूँ?

['text1', 'text2', 'text3']

इसके बाद मेरी योजना इसे एक स्ट्रिंग में इकट्ठा करना है, शायद इसका उपयोग करना .join(', '), और इसे इस तरह से एक प्रारूप में प्राप्त करना है:

'"text1", "text2", "text3"'

Answer 1

var optionTexts = [];
$("ul li").each(function() { optionTexts.push($(this).text()) });

... चाल चलनी चाहिए। अंतिम उत्पादन प्राप्त करने के लिए, जो आप देख रहे हैं, join()साथ ही कुछ संयोजन अच्छी तरह से करेंगे:

var quotedCSV = '"' + optionTexts.join('", "') + '"';

Comments

क्या jQuery क्वेरी द्वारा लौटाए गए तत्वों के लिए एक आदेश की गारंटी देता है? मैं मानूंगा कि लौटाया गया आदेश DOM (जैसे text1, text2, text3) में आदेश देने के समान है, लेकिन मुझे नहीं पता कि यह सच है या नहीं यह देखने के लिए दस्तावेज़ में क्या देखना है।

— स्टाइल डेफ

मैंने कभी नहीं देखा है कि यह डोम को किसी अन्य तरीके से पढ़ता है जो सामान्य रीडिंग ऑर्डर है। इसलिए हालांकि मैं इसे साबित नहीं कर सकता, मैं खेत को शर्त लगाता हूं कि यह डोम को ऊपर से नीचे तक पीछे ले जाता है :)

— Flater

क्या $ .each को खराब प्रदर्शन नहीं माना जाता है? यदि हाँ, तो क्या ऐसा करने का कोई अन्य तरीका है?

— डैनियल

आपके पास कितने सूची आइटम हैं जो यह एक मुद्दा है, @ डैनियल? हाँ, एक ही काम करने के अन्य तरीके हैं (आप एक बार में सरणी उत्पन्न करने के लिए $ .map () का उपयोग कर सकते हैं), लेकिन वे एक ही चीज़ की राशि देते हैं।

— शोग

@ शोग 9: मैं तालिका के प्रत्येक पंक्तियों से दो अलग-अलग स्तंभों से मान लेने वाली सूची में एक शब्दकोश को आगे बढ़ाना चाहता हूं। वहाँ ऐसा करने के लिए आसान तरीका नहीं है? अग्रिम में धन्यवाद।

— ln2khanal

Answer 2

निरर्थक मध्यवर्ती सरणियों के बिना:

arr = $('li').map(function(i,el) {
    return $(el).text();
}).get();

Jsfiddle डेमो देखें

Comments

तुम .get()अंत में चूक जाते हो।

— फेलिक्स क्लिंग

फेलिक्स क्लिंग्स के सुझाव के आधार पर: गिरफ्तारी = $ ('ली')। नक्शा (फ़ंक्शन () {वापसी $ (यह) .text ();})। Get ();

— एमिल स्टेंस्ट्रम

मुझे समझ में नहीं आता कि "फ़ंक्शन क्यों प्राप्त करें" आवश्यक है।

— crsuarezf

api.jquery.com/map बताता है कि क्यों (।) आवश्यक है ("जैसा कि रिटर्न मान एक jQuery-लिपटे सरणी है, यह मूल सरणी के साथ काम करने के लिए लौटी हुई वस्तु () लौटाया गया है ()।

— किट्टो

इससे भी बदतर बात यह है, कि इट्रेटर गलत है, आपको तत्व और इंडेक्स को स्विच करने की आवश्यकता है, ताकि यह फ़ंक्शन (i, el) कहे।

— कित्तो

Answer 3

और स्वच्छ जावास्क्रिप्ट में:

var texts = [], lis = document.getElementsByTagName("li");
for(var i=0, im=lis.length; im>i; i++)
  texts.push(lis[i].firstChild.nodeValue);

alert(texts);

Answer 4

kimstik करीब था, लेकिन काफी नहीं।

यह एक सुविधाजनक वन-लाइनर में कैसे करें:

$.map( $('li'), function (element) { return $(element).text() });

यहाँ jQuery के मानचित्र समारोह के लिए पूर्ण प्रलेखन है, यह काफी उपयोगी है: http://api.jquery.com/jQuery.map/

बस पूरी तरह से जवाब देने के लिए, यहां पूरी कार्यक्षमता है जिसे आप देख रहे थे:

$.map( $('li'), function (element) { return $(element).text() }).join(', ');

Comments

मैंने अभी इसे यहाँ देखा ( stackoverflow.com/questions/4856283/… ) और repost के बाद से यह जानने की एक बड़ी चाल है

— SeanDowney

मेरा रास्ता थोड़ा तेज होना चाहिए .. या नहीं?

— किमस्तिक

kimstik, Benchmark.js के अनुसार, मेरी फंक्शन कॉल क्रमशः ओपेरा और क्रोम के लिए 11,252 / 9,685 ops / sec करती है, जबकि आपके द्वारा पोस्ट की गई विधि 40 आइटम की सूची में 9,666 / 9,083 ops / sec करती है। मुझे लगता है कि अंतर jQuery तत्व सूची से रूपांतरण में आपके उदाहरण के लिए ऐरे में आता है, अगर यह मदद करता है। वे बहुत करीब हैं, इसलिए जो भी आपके कोडिंग स्टाइल को बेहतर सूट करता है :)

— Cybolic

Answer 5

var arr = new Array();

$('li').each(function() { 
  arr.push(this.innerHTML); 
})

Comments

आंतरिक HTML पर निर्भर होने के बजाय, आपको "इसे" को एक jQuery ऑब्जेक्ट में बदलना चाहिए और jQuery के मूल पाठ विधि का उपयोग करना चाहिए। $ (यह)

— .टेक्स्ट

क्यों? अंततः $ (यह) .html () मूल विधि का उपयोग करेगा

— खोडोर

इस मामले में नए ऐरे के बजाय [] का उपयोग करना बेहतर है () - क्या अंतर है

— krypru

Answer 6

आप निम्नानुसार कर सकते हैं। कोड की एक पंक्ति पर्याप्त होगी

• let array = $('ul>li').toArray().map(item => $(item).html());

• इच्छुक तत्व प्राप्त करें

  1. संतान प्राप्त करें

  2. ऐरे () विधि से सरणी प्राप्त करें

  3. अपने इच्छित परिणामों को फ़िल्टर करें

let array = $('ul>li').toArray().map(item => $(item).html());
console.log(array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>