How to sort HTML elements alphabetically with vanilla JavaScript?

How to sort HTML elements alphabetically with vanilla JavaScript? - javascript

I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags
let animals = document.querySelectorAll('.animal-name');
let animalNames = [];
for(let i=0; i<animals.length; i++){
animalNames.push(animals[i].textContent)
}
animalNames = animalNames.sort();
for(let i=0; i<animals.length; i++){
animals[i].textContent = animalNames[i];
}
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:
const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();
Array.from(container.children)
.sort((a, b) => key(a).localeCompare(key(b)))
.forEach(child => container.appendChild(child));
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
</div>

You can do this by appending the elements to the DOM dynamically using JS.
For example,
const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
document.getElementById("animal-container").appendChild(
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">{word}</div>
</div>
)})

Related

Modal, how to open other pages from directory ? JS HTML CSS

<div class="row">
<div class="column">
<div class="container">
<img
src="../images/img1.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal1"><h1>Marathon</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img5.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal5"><h1>Weight Lifting</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img8.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal8"><h1>Jogging</h1></div>
</div>
</div>
</div>
</div>
How to add modals so I can open other pages ( image01.html, image05.html ....) when I click on h1 from that photo.. I am new in this and i can't find a soulution. Any help would be great

How can I disaply a row of images upon pressing a button?

I want to be able to press one of the "buttons" as seen on the image below. When the button is pressed, the corresponding section of 3 images would appear/hide. As in, if I press on "Tapas", only the tapas images appear, If I press on "main" only the main images hide/appear.
Here is my HTML code:
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click", function(e) {
tapas.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Main Courses
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Dessert
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>

Everything is perfect including the function you have created, the only problem is that you haven't wrap the main courses images and dessert images into a div show-tapas-2 and show-tapas-3 and giving their a tag class load-more-button-2 and load-more-button-3
Just like you did it with Tapas images and then you can used the function for each respective content
var button1 = document.querySelector('.load-more-button');
var tapas1 = document.querySelectorAll('.show-tapas');
button1.addEventListener("click", function(e) {
tapas1.forEach(b => $(b).toggle());
})
var button2 = document.querySelector('.load-more-button-2');
var tapas2 = document.querySelectorAll('.show-tapas-2');
button2.addEventListener("click", function(e) {
tapas2.forEach(b => $(b).toggle());
})
var button3 = document.querySelector('.load-more-button-3');
var tapas3 = document.querySelectorAll('.show-tapas-3');
button3.addEventListener("click", function(e) {
tapas3.forEach(b => $(b).toggle());
})
.show-tapas {
display: none;
}
.show-tapas.showing {
display: block;
}
.show-tapas-2 {
display: none;
}
.show-tapas-2.showing {
display: block;
}
.show-tapas-3 {
display: none;
}
.show-tapas-3.showing {
display: block;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-2">
Main Courses
</div>
</div>
</div>
<div class="row show-tapas-2">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button-3">
Dessert
</div>
</div>
</div>
<div class="row show-tapas-3">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

Using some jquery to do that.
I have some rule in a tag. (attribute img-data-class)
and the row including your image should put your class name.
function toggleImage(elm){
var _this = $(elm);
var _class = _this.attr('img-data-class');
$('.' + _class).toggle();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid-portfolio" id="portfolio">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-tapas" onclick="toggleImage(this)" href="#">Tapas</a>
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-main" onclick="toggleImage(this)" href="#">Main Courses</a>
</div>
</div>
</div>
<div class="row show-main">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_main_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
<a img-data-class="show-dessert" onclick="toggleImage(this)" href="#">Dessert</a>
</div>
</div>
</div>
<div class="row show-dessert">
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_1_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_2_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-4 col-md-4 col-sm-6">
<a href="images/menu_dessert_3_1.jpeg" data-lightbox="image-1">
<div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="//via.placeholder.com/150x100">
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>

How to remove parent element without deleting its contents?

Is there a way to remove a parent without a child? There are 3 parents I need to delete, which is class "DELETE-A DELETE-B DELETE-C". Most articles I read, just delete 1 element only
Or maybe can i delete all the contents in the class DELETE-A without deleting the contents of the class KASKUS-C? So the class DELETE-D and class DELETE-H classes will also be deleted
<div class="KASKUS-A">
<div class="KASKUS-B">
<div class="DELETE-A">
<div class="DELETE-B">
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.how-to-draw-funny-cartoons.com/image-files/cartoon-owl-3f.gif" class="visible horizontal"></div>
</div>
</div>
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.drawingcoach.com/image-files/cartoon_cow_st6.gif" class="visible horizontal"></div>
</div>
</div>
</div>
</div>
<div class="DELETE-D">
<div class="DELETE-F">prev</div>
<div class="DELETE-G">next</div>
</div>
<div class="DELETE-H">
<div class="DELETE-I"><span></span></div>
<div class="DELETE-J"><span></span></div>
</div>
</div>
</div>
I want to be this
<div class="KASKUS-A">
<div class="KASKUS-B">
<div class="KASKUS-C">
<div><img src="http://www.how-to-draw-funny-cartoons.com/image-files/cartoon-owl-3f.gif" class="visible horizontal"></div>
</div>
<div class="KASKUS-C">
<div><img src="http://www.drawingcoach.com/image-files/cartoon_cow_st6.gif" class="visible horizontal"></div>
</div>
</div>
</div>
I using this
$(document).ready(function() {
$('.DELETE-D').remove();
$('.DELETE-H').remove();
$('.DELETE-A').remove();
$('.DELETE-B').remove();
$('.DELETE-C').not("KASKUS-C").remove();
// and
$('.DELETE-C:not("KASKUS-C")').remove();
// and
var DELETEC = $('.DELETE-C').contents();
$(".DELETE-C").replaceWith(DELETEC);
// and
$('.DELETE-A').not("KASKUS-C").remove();
// etc
});
But still not working https://jsfiddle.net/wwg35jeu/

You can use the JQuery unwrap() function if your element has children, or remove() if it has none :
$('[class*="DELETE-"]').each(function(){
if($(this).children().first().length > 0) $(this).children().first().unwrap();
else $(this).remove();
});
console.log($('body').children().eq(1)[0]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="KASKUS-A">
<div class="KASKUS-B">
<div class="DELETE-A">
<div class="DELETE-B">
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.how-to-draw-funny-cartoons.com/image-files/cartoon-owl-3f.gif" class="visible horizontal"></div>
</div>
</div>
<div class="DELETE-C">
<div class="KASKUS-C">
<div><img src="http://www.drawingcoach.com/image-files/cartoon_cow_st6.gif" class="visible horizontal"></div>
</div>
</div>
</div>
</div>
<div class="DELETE-D">
<div class="DELETE-F">prev</div>
<div class="DELETE-G">next</div>
</div>
<div class="DELETE-H">
<div class="DELETE-I"><span></span></div>
<div class="DELETE-J"><span></span></div>
</div>
</div>
</div>

choose particular DOM to Slide

I have some itemBox，I need to click itemBox and call the workItem which has same id number to SildeUp(the workItem is hidden at the beginning).
When one of workItem SlideUp，others would be hidden.
<div class="container">
<div class="row">
<div class="wrapper">
<div class="itemBox" id="item0">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
<div class="itemBox" id="item1">
<img src="img/default.jpg" alt="">
<div>titletitle</div>
</div>
</div>
</div>
</div>
<div class="workContent">
<div class="workItem" id="work0" style="background-color:#000000;">
<h2>demo1</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
<div class="workItem" id="work1" style="background-color:#333333;">
<a class="close" href="javascript:">x</a>
<h2>demo2</h2>
<img src="img/default.jpg" alt="">
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
<div>contentcontentcontentcontentcontentcontent</div>
</div>
</div>
How can I do this with javascript or Jquery?

this is simple (i used jQuery):
$(".itemBox").click (function(){
$("div[id^=work]").hide();
var id = $(this).attr("id");
var number = id.match(/item([0-9]+)/));
if (number[1])
$("div[id=work" + number[1] + "]").show();
})

How can i create a new card by clicking on a button (js)?

I am new to javascript. The button i wanna make should add every single time clicking it a new card to my web page. Unfortunatly my code does not work. Can you guys help me?
My Code:
html:
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
javaScript Code :
function newPerson() {
document.getElementByClassName("item")
};

Try it :
$(document).ready(function(){
$("button.plus").on("click",function(){
$("div:last").after("<div class=item><p>Title</p></div>");
})
})
This is Demo : UpdatedDemo

Do it like this
<div id = "main">
//your same html code
</div>
<script>
function newPerson() {
var newdiv = document.createElement('div');
newdiv.className+='item';
var newp = document.createElement('p');
newp.innerHTML = "TItle";
newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
</script>
You need to create the element through JS and append it to the document

This is another way to solve it:
function newPerson() {
$('#wrapper').append('<div class="item"><p>Title</p></div>')
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="plus">+</div>
<button onclick="newPerson()" class="plus">
<div class="item">
<p>title</p>
</div>
</button>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
<div class="item">
<p>Title</p>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

How to sort HTML elements alphabetically with vanilla JavaScript? - javascript

Related

Modal, how to open other pages from directory ? JS HTML CSS

How can I disaply a row of images upon pressing a button?

How to remove parent element without deleting its contents?

choose particular DOM to Slide

How can i create a new card by clicking on a button (js)?

Categories

Resources