forAach জাভাস্ক্রিপ্ট অ্যারে সহ কোনও ফাংশন ত্রুটি নয়

Question

আমি একটি সাধারণ লুপ তৈরির চেষ্টা করছি:

const parent = this.el.parentElement
console.log(parent.children)
parent.children.forEach(child => {
  console.log(child)
})

তবে আমি নিম্নলিখিত ত্রুটি পেয়েছি:

VM384: 53 আনকচড টাইপ এরিয়ার: প্যারেন্ট.চাইল্ডেন.ফোর্স প্রতিটি ফাংশন নয়

parent.childrenলগ যদিও :

কি সমস্যা হতে পারে?

দ্রষ্টব্য: এখানে একটি জেএসফিডাল ।

Comments

একই সমস্যা

— এলিমেন্ট.বোনদের

হ্যাঁ @Daut কারণ element.siblings একটি HTMLCollection ফেরৎ এবং HTMLCollections foreach () মেথড হবে না

— Freddo

আরে আপনি, গুগল অনুসন্ধানকারী! আপনি যদি এই ডাবল চেকটি পড়েন তবে এটি ফরচের পরিবর্তে একটি মূলধন ই এর সাথে প্রতিযোগিতায় রয়েছে ....

— রবার্ট সিনক্লেয়ার

Answer 1

প্রথম বিকল্প: প্রত্যেকে পরোক্ষভাবে প্রার্থনা করুন

parent.childrenবস্তুর মত একটি অ্যারে। নিম্নলিখিত সমাধানটি ব্যবহার করুন:

const parent = this.el.parentElement;

Array.prototype.forEach.call(parent.children, child => {
  console.log(child)
});

parent.childrenঅর্থাৎ NodeListধরন, যা বস্তুর কারণ মত একটি অ্যারের হল:

• এটিতে lengthসম্পত্তি রয়েছে যা নোডের সংখ্যা নির্দেশ করে
• প্রতিটি নোড হল 0 থেকে শুরু করে, সংখ্যাসূচক নামের একটি সম্পত্তি মান: {0: NodeObject, 1: NodeObject, length: 2, ...}

এই নিবন্ধে আরও বিশদ দেখুন ।

---

দ্বিতীয় বিকল্প: পুনরাবৃত্ত প্রোটোকল ব্যবহার করুন

parent.childrenএটি একটি HTMLCollection: যা পুনরাবৃত্তিযোগ্য প্রোটোকল প্রয়োগ করে । একটি ES2015 পরিবেশে, আপনি HTMLCollectionপুনরাবৃত্ত গ্রহণযোগ্য কোনও নির্মাণের সাথে এটি ব্যবহার করতে পারেন ।

HTMLCollectionস্প্রেড অপারেটর দিয়ে ব্যবহার করুন :

const parent = this.el.parentElement;

[...parent.children].forEach(child => {
  console.log(child);
});

বা for..ofচক্র সহ (যা আমার পছন্দসই বিকল্প):

const parent = this.el.parentElement;

for (const child of parent.children) {
  console.log(child);
}

Comments

আমি যখন আপনার সমাধানটি ব্যবহার করি তখন আমার আর কোনও সমস্যা হয় না তবে বেনামে ফাংশনটির কোডটি কার্যকর হয় না। .so ..

— Jérémy

আপনি কোন ব্রাউজারটি ব্যবহার করেন যাতে প্যারেন্ট.চাইল্ডেন আপনাকে বলে যে এটি নোডলিস্ট। ফায়ারফক্সে, এটি আমাকে বলে যে একটি এইচটিএমএল সংগ্রহ। যদি এটি নোডলিস্ট হয় তবে .forEach () কাজ করবে

— ফ্রেডডো

Answer 2

parent.childrenএকটি অ্যারে নয়। এটি এইচটিএমএল সংগ্রহ এবং এটির কোনও forEachপদ্ধতি নেই। আপনি এটিকে প্রথমে অ্যারেতে রূপান্তর করতে পারেন। উদাহরণস্বরূপ ES6 এ:

Array.from(parent.children).forEach(child => {
    console.log(child)
});

বা স্প্রেড অপারেটর ব্যবহার:

[...parent.children].forEach(function (child) {
    console.log(child)
});

Comments

অ্যারে প্রোটোটাইপের সাথে গোলযোগের চেয়ে আমি এই সমাধানটিকে অনেক বেশি পছন্দ করি।

— দাউট

এবং এই উত্তরটি হ'ল (এর মধ্যে একটি) ওপিএস প্রশ্নের সঠিক উত্তর। প্যারেন্ট.চিল্ডেন হ'ল এইচটিএমএল সংগ্রহ যা একটি .forEach পদ্ধতি নেই

— ফ্রেডডো

Answer 3

parent.childrenপ্রযুক্তিগতভাবে একটি এইচটিএমএল সংগ্রহ একটি নোড তালিকার তালিকা প্রদান করবে । এটি অবজেক্টের মতো অ্যারে, তবে অ্যারে নয়, সুতরাং আপনি সরাসরি এটির উপরে অ্যারে ফাংশনগুলি কল করতে পারবেন না। এই প্রসঙ্গে আপনি এটিকে আসল অ্যারেতে রূপান্তর করতে ব্যবহার করতে পারেন ,Array.from()

Array.from(parent.children).forEach(child => {
  console.log(child)
})

Comments

নাহ, প্যারেন্ট.চাইল্ডেন কোনও নোডলিস্ট কিন্তু একটি এইচটিএমএল সংগ্রহ ফিরিয়ে দেয় না। একই জিনিস না। যদি একটি nodeList ছিল, .forEach কাজ করবে

— Freddo

Answer 4

আরও নির্বোধ সংস্করণ, কমপক্ষে আপনি নিশ্চিত যে এটি রূপান্তর এবং ES6 ছাড়াই সমস্ত ডিভাইসে কাজ করবে:

const children = parent.children;
for (var i = 0; i < children.length; i++){
    console.log(children[i]);
}

https://jsfiddle.net/swb12kqn/5/

Comments

উত্সাহিত হয়েছে কারণ এই সমস্ত নতুন ES6 ফাংশনগুলি ঠিক একই পুরানো জিনিসটি যা উপলব্ধ ছিল ঠিক তেমন করে, তবে একটি অগোছালো উপায়ে,

— জেএসের মতো

Answer 5

parent.childrenHTMLCollectionঅ্যারে মত বস্তু যা একটি । প্রথমত, আপনাকে পদ্ধতিগুলি Arrayব্যবহারের জন্য এটি একটি সত্য রূপান্তর করতে হবে Array.prototype।

const parent = this.el.parentElement
console.log(parent.children)
[].slice.call(parent.children).forEach(child => {
  console.log(child)
})

Comments

বা এটিকে রূপান্তর করবেন না, কিন্তু .achEach () এ .call () ব্যবহার করুন?

— nnnnnn

@nnnnnn নীচে আমার উত্তর দেখুন।

— দিমিত্রি পাভলুটিন

অ্যারে-এর মতো অবজেক্টটিকে অ্যারেতে রূপান্তর করার অনেকগুলি উপায় রয়েছে :) এটি এর মধ্যে একটি

— দিমিত্রি

@ দিমিত্রিওলকুটোভ আপনার এটিকে রূপান্তর করতে হবে না - জাভাস্ক্রিপ্ট একটি হাঁসের টাইপিংয়ের ভাষা। কেবল এই বৈশিষ্ট্যটি ব্যবহার করুন।

— দিমিত্রি পাভলুতিন

Answer 6

কারণ parent.childrenএটি একটি নোডলিস্ট , এবং এটি .forEachপদ্ধতিটিকে সমর্থন করে না (নোডলিস্ট যেমন কাঠামোর মতো অ্যারে তবে অ্যারে নয়), তাই প্রথমে এটিকে অ্যারে রূপান্তর করে কল করার চেষ্টা করুন

var children = [].slice.call(parent.children);
children.forEach(yourFunc);

Comments

না, এটি কোনও নোডলিস্ট নয়, এটি একটি HTML সংগ্রহ

— ফ্রেডডো

Answer 7

এর কোনও প্রয়োজন নেইforEach , আপনি কেবলমাত্র fromদ্বিতীয় প্যারামিটার ব্যবহার করে পুনরাবৃত্তি করতে পারেন :

let nodeList = [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]
Array.from(nodeList, child => {
  console.log(child)
});

Comments

দুঃখজনক সংবাদটি হ'ল প্যারেন্ট.চাইল্ডেন কোনও নোডলিস্ট নয় ... .ফর্ম () কাজ করবে না।

— ফ্রেডডো

@ সিড্রিক যদি আপনার বস্তুটি নোডলিস্ট না হয় তবে আপনার এটির জন্য বিশেষভাবে একটি নতুন প্রশ্ন জিজ্ঞাসা করা উচিত। এখানে, উত্তরটি অভ্যন্তরীণভাবে ভুল বা ক্ষতিকারক হলে ডাউনভোটিং ব্যবহার করা হয় এবং কোড স্নিপেট হিসাবে আপনি দেখতে পেতে পারেন, অবজেক্টের সমস্ত উপাদানগুলি পুনরাবৃত্তি এবং মুদ্রিত হয়, যা ওপি-র প্রশ্নের লক্ষ্য ছিল।

— আর্মফুট

হ্যাঁ, সমস্যাটি হ'ল এইচপির এইচটিএমএল সংগ্রহ সম্পর্কিত প্রশ্ন, কোনও নোডলিস্ট নয় ... সুতরাং উত্তরটি কেবল প্রশ্নের উত্তর দিচ্ছিল না

— ফ্রেডডো

@ সিড্রিক এই উত্তরটি এইচটিএমএল সংগ্রহের মাধ্যমে পুনরাবৃত্তি হবে যেহেতু Array.fromপ্রথম প্যারামিটারে প্রদত্ত বস্তুকে অ্যারেতে রূপান্তরিত করে। অতিরিক্ত লুপের ( এমডিএন ডকস) প্রয়োজন ছাড়াই ম্যাডক্স 2 এর উত্তরের ফলাফলটি একই ।forEachArray.from

— আর্মফুট

Answer 8

আপনি যদি এই জাতীয় কিছু লুপ করার চেষ্টা করছেন NodeList:

const allParagraphs = document.querySelectorAll("p");

আমি এটি এইভাবে লুপ সুপারিশ:

Array.prototype.forEach.call(allParagraphs , function(el) {
    // Write your code here
})

ব্যক্তিগতভাবে, আমি বেশ কয়েকটি উপায়ে চেষ্টা করেছি তবে বেশিরভাগই কাজ করে নি যেমন আমি একটি লুপ করতে চেয়েছিলাম NodeList, তবে এটি একটি কবজির মতো কাজ করে, চেষ্টা করে দেখুন!

NodeListএকটি অ্যারের নয়, কিন্তু আমরা একটি অ্যারের যেমন আচরণ ব্যবহার Array.সুতরাং, আপনি জানেন যে এটি পুরোনো ব্রাউজারে সমর্থিত নয় প্রয়োজন!

সম্পর্কে আরও তথ্য প্রয়োজন NodeList? দয়া করে এটি পড়ুনMDN এ ডকুমেন্টেশন ।

Comments

এই উত্তরটি স্পষ্টতই নোডলিস্টে কাজ করে। ঝামেলা প্যারেন্ট.চাইল্ডেন একটি এইচটিএমএল সংগ্রহ ফিরিয়ে দেয়, যা কোনও নোডলিস্ট নয় ...

— ফ্রেডডো

Answer 9

যেহেতু আপনি ES6 এর বৈশিষ্ট্যগুলি ব্যবহার করছেন ( তীর ফাংশন ), আপনি কেবল এটির মতো লুপের জন্যও ব্যবহার করতে পারেন :

for(let child of [{0: [{'a':1,'b':2},{'c':3}]},{1:[]}]) {
  console.log(child)
}

Comments

সম্মত। কী বিভ্রান্তি, ES6 সিনট্যাক্স, যদিও ... আমাকে কাঁদতে চায়, এবং আমি সি ++ ব্যাকগ্রাউন্ড থেকে আসছি ...

— ফ্রেডডো

Answer 10

আপনি না পরীক্ষা করতে যদি আপনার দ্বারা টাইপ করা foreach সঠিকভাবে, যদি আপনি টাইপ করা foreach অন্যান্য প্রোগ্রামিং ভাষা এটা কাজ করবে না মত।

Answer 11

আপনি এর childNodesপরিবর্তে ব্যবহার করতে পারেন children, childNodesব্রাউজারের সামঞ্জস্যতা বিষয়গুলি বিবেচনা করে আরও নির্ভরযোগ্য, এখানে আরও তথ্য :

parent.childNodes.forEach(function (child) {
    console.log(child)
});

বা স্প্রেড অপারেটর ব্যবহার:

[...parent.children].forEach(function (child) {
    console.log(child)
});