Loop in HTML Collections doesnt loop correctly

Question

im trying to loop through my HTML Collections as

const nodeItems = document.getElementsByClassName('image-inside')

I tried to loop like

for(let node of nodeItems) {
     console.log('im node ', node)                
     console.log('im node url' , node.src)
     return writer.createAttributeElement( 'img', {
            src: node.src,
            style: `width:${node.style.width};
                    height:${node.style.height};`,
                    class: 'image-inside'
     } , { priority: 7 } )
}

but only the first node were logged TWICE not the second one. Any thoughts guys? Any help would be very appreciated. Thanks for reading

UPDATE: So i have tried to convert to array. which is okay the logging is good. But the prototype of it is Array, what i should return is Nn ( due to writer.createAttributeElement() ). I dont even think i can achieve this

UPDATE2: So currently the array is loaded correctly now But when get the data from CKEditor5 through editor.getData() its still taking the last element

Still thank you guys so much for reading

I'd think it would break the code since a return statement isn't valid in a for...of statement. — Cephas
– Cephas, Commented Dec 30, 2020 at 10:43
Try removing the return inside the loop, allowing all items to be targeted — Teknotica
– Teknotica, Commented Dec 30, 2020 at 10:44
@KitangaNday it's perfectly valid code, you can return from inside a loop. — tevemadar
– tevemadar, Commented Dec 30, 2020 at 10:45
Press F12 and give it a try. You'll get a syntax error. It isn't a loop it's a for..of loop 😂, this should be breaking — Cephas
– Cephas, Commented Dec 30, 2020 at 10:47

Oleg Andreyev · Accepted Answer · 2020-12-30 10:48:27Z

3

You are breaking loop with return stmt.

See another answer https://stackoverflow.com/a/11714515/1205171

answered Dec 30, 2020 at 10:48

Oleg Andreyev

6571 gold badge5 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

mrpuzzy2010 Over a year ago

Then why the first node logging twice?

Oleg Andreyev Over a year ago

You have two elements? But I think it’s different topic. You need to provide you HTML code at least :)

Oleg Andreyev Over a year ago

I don’t know what your writer does, but be aware that HTMLCollection is live and mutable developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

mrpuzzy2010 Over a year ago

Thank you for your answer, the writer is from an engine in ckeditor5 ckeditor.com/docs/ckeditor5/latest/api/…

tevemadar Over a year ago

@mrpuzzy2010 it may run twice perhaps because you are invoking the function itself again?

|

Cephas · Accepted Answer · 2020-12-30 12:45:15Z

2

EDIT: Use EmptyElement since this is what you end up creating if you extend Element class

As mentioned in the comments you should remove the return statement.

Maybe convert it to an array first and remap the array like so:

let nodeItems = Array.from(document.getElementsByClassName('image-inside'));

nodeItems = nodeItems.map(function(node) {
     console.log('im node ', node)                
     console.log('im node url' , node.src)
     // Instead of creating your own element from Element (i.e. Nn), why not use Empty Element class instead. It will be what you create anyways I'm guessing
     return writer.createEmptyElement( 'img', {
            src: node.src,
            style: `width:${node.style.width};
                    height:${node.style.height};`,
                    class: 'image-inside'
     } , { priority: 7 } )
});

edited Dec 30, 2020 at 12:45

answered Dec 30, 2020 at 10:59

Cephas

3,5952 gold badges21 silver badges31 bronze badges

7 Comments

mrpuzzy2010 Over a year ago

Ive tried like you and still didnt achieve what i want due to the writer. Thank you

Cephas Over a year ago

@mrpuzzy2010 since you are getting images why not use createEmptyElement since it's used for elements that don't have children (e.g. img elements). Check my answer.

mrpuzzy2010 Over a year ago

Hm, the array is loading correctly but when its come to get the data from the editor its still loading only the last element. Check my update, i have capped some more picture. Thank you sir

mrpuzzy2010 Over a year ago

I have solved the problem, its due to my lack of knowledge about conversion between model and view of CKEditor. I can show you the link of github to my custom build, u want it?

Cephas Over a year ago

@mrpuzzy2010 thanks man, but no. I'm just happy that you resolved it.

|

Collectives™ on Stack Overflow

Loop in HTML Collections doesnt loop correctly

2 Answers 2

6 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related