Select every child element in HTML except one - javascript

I'm trying to edit the style of the HTML elements in my website using javascript but instead of having to write each child element except one, is there a method in javascript to select everything under the parent div <div id = "pages"> except one child?
HTML
<div id = "pages">
<div id = "page-1"></div>
<div id = "page-2"></div>
<div id = "page-3"></div>
<div id = "page-4"></div>
</div>
Javascript
//is there a way to select every pages in div id = "pages" except for one page without typing
//everything manually?
document.getElementbyId("page-1").style.display = "none";
document.getElementbyId("page-2").style.display = "block";
document.getElementbyId("page-3").style.display = "none";
document.getElementbyId("page-4").style.display = "none";

this way:
#pages > div:not([id="page-2"]) {
display : none;
}
<div id = "pages">
<div id="page-1">page-1</div>
<div id="page-2">page-2</div>
<div id="page-3">page-3</div>
<div id="page-4">page-4</div>
</div>
If you hate CSS:
function ShowPage(pageID)
{
document.querySelectorAll('#pages > div').forEach(el =>
{
el.style.display = (el.id === pageID) ? 'block' : 'none'
})
}
ShowPage('page-2')
<div id="pages">
<div id="page-1">page-1</div>
<div id="page-2">page-2</div>
<div id="page-3">page-3</div>
<div id="page-4">page-4</div>
</div>

You can do something like this.
let children = document.getElementById('pages').children;
for (let index = 0; index < children.length; index++){
if (children[index].id !== 'page-2') {
children[index].style.display = 'none';
} else {
children[index].style.display = 'block';
}
}
<div id = "pages">
<div id = "page-1">a</div>
<div id = "page-2">b</div>
<div id = "page-3">c</div>
<div id = "page-4">d</div>
</div>

You can use an array to store your ids to not include, that way you can add more ids in the long run. Then loop through the divs and check if the id is in the array.
const idsnotinclude = ["page-6"]
const divs = document.getElementById('pages').children;
const divsArray = Array.from(divs);
divsArray.forEach(function (div){
if(idsnotinclude.includes(div.id)){
div.style.display = "block";
return;
}
div.style.display = "none";
});
<div id = "pages">
<div id = "page-1">1</div>
<div id = "page-2">2</div>
<div id = "page-3">3</div>
<div id = "page-4">4</div>
<div id = "page-5">5</div>
<div id = "page-6">6</div>
<div id = "page-7">7</div>
<div id = "page-8">8</div>
<div id = "page-9">9</div>
<div id = "page-10">10</div>
</div>

Create a reusable function that accepts a desired page number
Use the Attribute selector [id^=page-] (meaning: starts with: page-)
Use a small regex to get the number suffix from every element ID
Use Element.classList's .toggle method:
const showPage = (num) => {
document.querySelectorAll("[id^=page-]").forEach(EL => {
const pageNum = +EL.id.replace(/\D+/, "");
EL.classList.toggle("hide", pageNum !== num);
});
};
showPage(2);
showPage(3);
.hide {
display: none;
}
<div id="pages">
<div id="page-1">This is page 1</div>
<div id="page-2">This is page 2</div>
<div id="page-3">This is page 3</div>
<div id="page-4">This is page 4</div>
</div>

Related

How to hide DIV's parent in JS with a specific content

I'm trying to hide a DIV's parent when a certain DIV contains a specific text.
An example. This DIV I want to stay:
<div class="report-per-day">
<div class="report-day">26 May 2022</div>
<div class="status-report-rows">
<p class="report__headline">This is our report</p>
</div>
</div>
</div>
But I want to hide this whole DIV, because there's a DIV .mt-2, which contains "No new incident."
<div class="report-per-day">
<div class="report-day">25 May 2022</div>
<div class="mt-2" style="display: none;">
<small class="text-muted">No new incident.</small>
</div>
</div>
</div>
I have this Java Script, but it only hides the .mt-2. I'd also like to hide its 2 parents, .report-per-day and .report-day
Do you guys happen to have any suggestions? Thanks a lot!
const divs = document.getElementsByClassName('mt-2');
for (let x = 0; x < divs.length; x++) {
const div = divs[x];
const content = div.textContent.trim();
if (content == 'No incidents reported.') {
div.style.display = 'none';
}
}
Loop the parent div you want to hide instead of mt-2 and check the content of mt-2 inside the loop. Try:
const divs = document.getElementsByClassName('report-per-day'); // report-per-day instead of mt-2
for (let x = 0; x < divs.length; x++) {
const div = divs[x].querySelector('.mt-2'); // add a selector for .mt-2
const content = div.textContent.trim();
if (content == 'No incidents reported.') {
div.style.display = 'none';
}
}
You can use parentElement
const divs = document.getElementsByClassName('mt-2');
for (let x = 0; x < divs.length; x++) {
const div = divs[x];
const content = div.textContent.trim();
if (content === 'No new incident.') {
div.parentElement.style.display = 'none';
}
}
<div class="report-per-day">
<div class="report-day">26 May 2022</div>
<div class="status-report-rows">
<p class="report__headline">This is our report</p>
</div>
</div>
<div class="report-per-day">
<div class="report-day">25 May 2022</div>
<div class="mt-2">
<small class="text-muted">No new incident.</small>
</div>
</div>

How to change the id of an element in html using javascript?

It is my first time using JavaScript. I am trying to make a button where every time visitors click, it'll show another extra line of text. I often get an error on my JavaScript, and I'm not sure how to fix it. Thank you so much!
HTML;
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<div class="text">
<div class="one hide">
One
</div>
<div class="two hide">
Two
</div>
<div class="three hide">
Three
</div>
</div>
</div>
</body>
<script src="script.js"></script>
</html>
JS;
const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = document.getELementById('hr2');
var hr3 = document.getElementById('hr3');
hr1.addEventListener('click', () => {
one.classList.remove('hide');
hr1.id = "hr2";
})
// I often get an error on hr2.addEventListener
hr2.addEventListener('click', () => {
two.classList.remove('hide');
hr2.id = "hr3";
})
Your code throws error because you are trying to set hr2 and hr3 when they are not exist.
You need to set hr2 and hr3 variables after setting id's of them like below:
hr1.id = "hr2";
hr2= document.getElementById('hr2');
const text = document.querySelector('.text');
const hide = document.querySelector('.hide');
const one = document.querySelector('.one');
const two = document.querySelector('.two');
var hr1 = document.getElementById('hr1');
var hr2 = null;
var hr3 = null;
hr1.addEventListener('click', () => {
//one.classList.remove('hide');
hr1.id = "hr2";
hr2= document.getElementById('hr2');
console.log(hr2);
hr2.addEventListener('click', () => {
two.classList.remove('hide');
hr2.id = "hr3";
hr3 = document.getElementById('hr3');
console.log(hr3);
})
})
// I often get an error on hr2.addEventListener
<div class="container">
<div class="text">
<div class="one hide">
One
</div>
<div class="two hide">
Two
</div>
<div class="three hide">
Three
</div>
</div>
clickme
</div>

Add an existing div element with classes (along with its underlying elements) to a div

I need to have a function that would add an existing div with a class (along with its underlying elements) to a particular div using for loop. It looks like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
I need to loop through a function that will produce or duplicate "list-row" twice.
$(function() {
var leftcol = document.getElementsByClassName('left-col');
for (var i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row');
leftcol.appendChild(listrow[i]);
}
})
It should look like this:
<div class="left-col">
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
<div class="list-row">
<div class="list-row2">
<span>Hello</span>
</div>
</div>
</div>
You can try the following way:
$(function() {
var leftcol = document.querySelector('.left-col');
for (let i = 0; i < 2; i++) {
var listrow = document.querySelector('.list-row').cloneNode();
listrow.textContent = i + 1 + listrow.textContent;
leftcol.appendChild(listrow);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="left-col">
<div class="list-row">0</div>
</div>
You could use cloneNode and set the deep property to true. This will clone the node and all of its descendants.
For example:
function cloneNode(copies = 1) {
for (let i = 0; i < copies; i++) {
let leftcol = document.getElementsByClassName('left-col')[0];
let nodeToClone = document.querySelector(".list-row");
let clonedNode = nodeToClone.cloneNode(true);
leftcol.appendChild(clonedNode);
}
}
clone.addEventListener("click", function() {
cloneNode();
});
<button id="clone" type="button">Clone Node</button>
<div class="left-col">
<div class="list-row">Test</div>
</div>
If you wanted to insert more than one copy, you could pass a different value to the cloneNode function.
You can use jQuery's .clone() method to copy the entire content of an element to another element. The boolean argument passed to the clone function determines whether the events associated with the cloned element has to be copied or not. true indicates all the events associated with that div has to be copied.
$(function() {
$('.list-row').each(function(){
$(".left-col").append($(this).clone(true));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="left-col">
<div class="list-row"><h1>This is original row</h1></div>
</div>
$(function() {
var leftcol = document.getElementsByClassName('left-col');
var listrow = document.querySelector('.list-row');
for (var i = 0; i < 2; i++) {
leftcol.appendChild(listrow.clone(true));
}
})

JS search using keyup event on input tag

I have few div elements with different text content and one input tag.
<input id="search" type="text"/>
<div class="list>
<div id="el"> red </div>
<div id="el"> blue </div>
<div id="el"> red green </div>
</div>
I'd like to get something like this:
if div's textContent is equal to input.value this div is displayed. Else, it's hidden.
Example:
input.value = "red"
/* "red" and "red green" are displayed, "blue" is hidden */
My JS code:
var search = document.getElementById("search");
var el = document.getElementById("el");
search.addEventListener("keyup", function(){
if(search.value == el.textContent){
el.style.display = "block"}
else{
el.style.display = "none"}})
<input id="search" type="text"/>
<div class="list">
<div id="el"> red </div>
<div id="el"> blue </div>
<div id="el"> red green </div>
</div>
You don't want to assign the same id to multiple items. Instead use class.
See below for a working solution:
var search = document.getElementById("search");
var els = document.querySelectorAll(".el");
search.addEventListener("keyup", function() {
Array.prototype.forEach.call(els, function(el) {
if (el.textContent.trim().indexOf(search.value) > -1)
el.style.display = 'block';
else el.style.display = 'none';
});
});
<input id="search" type="text" />
<div class="list">
<div class="el">red</div>
<div class="el">blue</div>
<div class="el">red green</div>
</div>
Here's the solution for regardless of where the input is located, as long as it is space delimited (just in case):
var search = document.getElementById("search");
var els = document.querySelectorAll(".el");
search.addEventListener("keyup", function() {
Array.prototype.forEach.call(els, function(el) {
var values = search.value.split(' ');
var display = true;
for (var i = 0; i < values.length; i++) {
if(el.textContent.trim().indexOf(values[i]) === -1)
display = false;
}
el.style.display = display ? 'block' : 'none';
});
});
<input id="search" type="text" />
<div class="list">
<div class="el">red</div>
<div class="el">blue</div>
<div class="el">red green</div>
</div>

JQuery Sort Divs by child divs

I have the following list of divs and I'd like to be able to sort them using Javascript / JQuery.
<div class="item">
<div class="genre">Classical</div>
<div class="name">Alpha</div>
<div class="location">London</div>
</div>
<div class="item">
<div class="genre">Blues</div>
<div class="name">Bravo</div>
<div class="location">New York</div>
</div>
<div class="item">
<div class="genre">Pop</div>
<div class="name">Charlie</div>
<div class="location">Paris</div>
</div>
<div class="buttons">
Sort by Genre
Sort by Name
Sort by Location
</div>
I'd like to be able to sort the items by their Genre/Name/Location alphabetically.
Example: If Sort by Genre was clicked, it would sort the items in 0-9 A-Z by Genre.
If any of you have any tips it would greatly be appreciated.
Cheers :)
You have to make a little change to html like following:
<div id="container">
<div class="item">
<div class="genre">Classical</div>
<div class="name">Alpha</div>
<div class="location">London</div>
</div>
<div class="item">
<div class="genre">Blues</div>
<div class="name">Bravo</div>
<div class="location">New York</div>
</div>
<div class="item">
<div class="genre">Pop</div>
<div class="name">Charlie</div>
<div class="location">Paris</div>
</div>
</div>
<div class="buttons">
Sort by Genre
Sort by Name
Sort by Location
</div>
jQuery
function sorting(tag) {
var items = $('div.item').sort(function(a, b) {
var txt1 = $.trim($('div.' + tag, a).text()),
txt2 = $.trim($('div.' + tag, b).text());
if (txt1 > txt2) return 1;
else return -1;
});
return items;
}
$('.buttons a').on('click', function(e) {
e.preventDefault();
$('div#container').html(sorting(this.id));
});
Working Sample
Ok, this would be my pure JS solution.
First, we should wrap your <div>s into a larger container.
<div id = "wrapper">
<div id = "item">...</div>
<div id = "item">...</div>
<div id = "item">...</div>
</div>
Now, let's define a constant - which property do you want to sort it by? (this will probably be a function parameter later in your code).
var propName = "genre";
Let's get all the <div>s and put them in an array.
var items = document.getElementsByClassName("item");
var itemsArray = new Array();
Let us sort them lexicographically according to the text of the selected property.
for (var i = 0; i < items.length; i++)
itemsArray.push(items[i]);
itemsArray.sort(function(a, b) {
var aProp = a.getElementsByClassName(propName)[0].firstChild.nodeValue;
var bProp = b.getElementsByClassName(propName)[0] .firstChild.nodeValue;
if (aProp < bProp)
return -1;
else if (aProp > bProp)
return 1;
else
return 0;
});
Let us construct a document fragment consisting of the sorted <div>s.
var fragment = document.createDocumentFragment();
for (var i = 0; i < itemsArray.length; i++)
fragment.appendChild(itemsArray[i].clone());
Finally, let us clear the contents of the <div id = "wrapper"> and replace it with the document fragment.
document.getElementById('wrapper').innerHTML = '';
document.getElementById('wrapper').appendChild(fragment);
Also, note that document.getElementsByClassName does not work in IE<9, but I was now really lazy to cope with that issue.
A fiddle: http://jsfiddle.net/nNXr4/
Check this beast:
function sortByCreatedOnAsc(a,b){
return $(a).find('.created_on').text() > $(b).find('.created_on').text();
}
function sortByCreatedOnDesc(a,b){
return $(a).find('.created_on').text() < $(b).find('.created_on').text();
}
function reorderEl(el){
var container = $('#tasks');
container.html('');
el.each(function(){
$(this).appendTo(container);
});
}
$('#created_on').click(function(){
if($(this).hasClass("asc")){
reorderEl($('.task').sort(sortByCreatedOnDesc));
$(this).removeClass("asc");
$(this).addClass("desc");
} else {
reorderEl($('.task').sort(sortByCreatedOnAsc));
$(this).removeClass("desc");
$(this).addClass("asc");
}
return false;
});
jsfiddle: http://jsfiddle.net/jKJc3/116/

Categories