<ol>
<li class="horses">Thoroughbred</li>
<li class="horses">Arabian</li>
<li class="horses">Brlgian</li>
<li class="horses">Percheron</li>
<li class="horses">Arabian</li>
<li class="animals">Brlgian</li>
<li class="animals">dog</li>
<li class="animals">cat</li>
</ol>
<ul id="animals"></ul>
<script>
$(document).ready(function(){
var animals = $('li.animals').get(); //.Variable by array of animals class values
var horses = $('li.horses').get(); //.horseCase class values as an array
var tmp = $.merge(animals, hoses); // Combine the first and second class arrays to replace the tmp variable
tmp = $.Unique(tmp); //tmp Deletes duplicate values of variable
$('#animals').append($(tmp).Add the variable tmp to the id value of clone(); //ul.
});
/* an expected result
Thoroughbred
Arabian
Brlgian
Percheron
dog
cat
*/
/*Output Results
Thoroughbred
Arabian
Brlgian
Percheron
Arabian
Brlgian
dog
cat
*/
</script>
I interpreted the comment section of the script Based on the expected output, I think it needs to be printed with all the duplicate values deleted The result value was printed with duplicate values...Is there anything wrong with the interpretation?
jquery
The array returned by .get()
is an array of DOM elements, not an array of innerHTML
elements. Therefore, the intention of filtering out only the unique contents of the DOM objects is failing.
How did I know? I didn't know. I read the Document again and spray debug output on the console. console.log(tmp);
tmp = $.If you take a picture before or after unique(tmp);
, you'll see this.
(8) [li.animals, li.animals, li.animals, li.horses, li.horses, li.horses, li.horses, li.horses]
(8) (8) [li.horses, li.horses, li.horses, li.horses, li.horses, li.animals, li.animals, li.animals]
I think I wouldn't be complicated and would just say, "a href="https://codepen.io/yuptogun/pen/gOpOyOR" target="_blank">
let newBarn = document.getElementById('animals');
let livestock = document.querySelectorAll('#barn li');
Let uniqueLivestock = []; // List to store only unique values
for (i = 0; i < livestock.length; i++) {
if (uniqueLivestock.indexOf(livestock[i].innerText) < 0) { // If not listed
uniqueLivestock.push(livestock[i].innerText); // fill out the list
newBarn.innerHTML += '<li>' + livestock[i].InnerText + '</li>'; // into a new barn.
}
}
© 2024 OneMinuteCode. All rights reserved.