Traverse array's data to SVG

there is a group of array featuring SVG path colors. I wrote a function as follows:

for(var item in colorCollectionArray) {
                var village = colorCollectionArray[item].village;
                var fillColor = "fill:"+colorCollectionArray[item].colorSet;

                $(SVG).find("path").each(function(){
                    var id = $(this).attr("id");
                    console.log(id)          
                    if(village) {
                        if(id.substring(6) === village){
                            $(this).attr("style",fillColor);
                        }
                    }
                });
            }

the color has been successfully filled in, but the performance is not very good, because the number of this data is so large, it will be very slow every time.
I would like to ask you if you have any suggestions. I checked as if I would like to use return (recursion) to traverse. But I don"t quite understand how to use it. I look forward to the advice of high-level people. -sharp-sharp-sharp problem description

the environmental background of the problems and what methods you have tried

related codes

/ / Please paste the code text below (do not replace the code with pictures)

what result do you expect? What is the error message actually seen?

Sep.27,2021
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea51ba-1d32.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea51ba-1d32.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?