I have some very simple code to get information about active div with class name active. I currently trying to get its index between a collection of divs with class name slide. However, I tried many selectors with no benefit. So, I need your help.
CSS
<style type="text/css">
.slide {
width:50px;border:1px solid #808080;height:50px;float:left; display:inline-block;
text-align:center; vertical-align:middle;/*display:none;*/
}
.active { background-color:brown }
</style>
HTML
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
jQuery:
<script type="text/javascript">
$(document).ready(function () {
var nxt = 0;
var prv = 0;
var crnt = 0;
$("#get_info").click(function () {
crnt = $(".slide").index(".slide .active");
$('#msg').html(crnt);
});
});
</script>
As shown all I need to get "active" position index between "slide". The permanent result for this is -1.
You can get it like this:
$(document).ready(function() {
$("#get_info").click(function() {
let crnt = $(".slide").index($(".slide.active"));
$('#msg').html(crnt);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="text-align:center">
<input id="get_info" type="button" value="<<>>" />
<br />
<div style="display:inline-block">
<div class="slide ">0</div>
<div class="slide">1</div>
<div class="slide active">2</div>
<div class="slide">3</div>
</div>
<br />
<p id="msg"></p>
</div>
Related
How to hide other and left just one that is click?
I tried something like this, but this doesn't work since all my divs has different ids
$(document).ready(function() {
$('.campingTrips').click(function(e) {
var image = e.target,
interval,
height = 200,
width = 200,
z = $(this).css("z-index");
$(this).css("z-index", z + 10);
$('#product-container').addClass('disable-click');
$('.unhidden').not($(this).parent().parent()).addClass('noOpacity');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
I'm using Java, Spring Boot, this is how I'm trying to include jQuery
<script src="webjars/jquery/1.9.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="#{/js/index.js}"></script>
Edit: NEW CODE
So my html is now like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
And js like this:
$(document).ready(function () {
$('clickable').on('click', function () {
var current = $(this).attr('id');
$('clickable:not(#' + current + ')').hide();
})
})
Error from inspect console is:
Uncaught ReferenceError: $ is not defined
at index.js:119:1
You can hide all and then show the clicked one, will have the same effect.
$('.clickable').on('click', (e) =>
{
// Hide all
$('.clickable').hide();
// Show this
$(e.target).closest('div').show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="campingTrips" class="clickable"><h1>Camping trips</h1>
</div>
<div id="cityBreaks" class="clickable"><h1>City breaks</h1>
</div>
<div id="roadTrips" class="clickable"><h1>Road trips</h1>
</div>
<div id="cruises" class="clickable"><h1>Cruises</h1>
</div>
<div id="groupTours" class="clickable"><h1>Group tours</h1>
</div>
<div id="girlsTrips" class="clickable"><h1>Girls’ trips</h1>
</div>
But i strongly suggest to use a specific class for selecting those div elements, or base your code in a parent container.
you can do following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="campingTrips">
<h1>Camping trips</h1>
</div>
<div id="cityBreaks">
<h1>City breaks</h1>
</div>
<div id="roadTrips">
<h1>Road trips</h1>
</div>
<div id="cruises">
<h1>Cruises</h1>
</div>
<div id="groupTours">
<h1>Group tours</h1>
</div>
<div id="girlsTrips">
<h1>Girls’ trips</h1>
</div>
and
<script>
$(document).ready(function() {
$('div').on('click', function() {
var current = $(this).attr('id');
$('div:not(#' + current + ')').hide();
})
})
</script>
It will hide every other div except the one that is clicked.
So, I don't have any working knowledge of JavaScript, but I am wondering why this does not work for me. I have 4 buttons, 4 different divs with different images, when one button is clicked I would like the images to change to the category which is displayed on the button.
i.e Button: "Windows" --Button is clicked--> Show images of windows
Button "Doors" --Button is clicked--> show images of Doors
JavaScript file is imported to HTML document:
<head>
<script type="text/javascript" src="script.js"></script>
</head>
const showChoosenCategory = event => {
const getId = event.id
const links = document.querySelectorAll('.work-category button')
for (i = 0; i < links.length; i++) {
if (links[i].hasAttribute('class')) {
links[i].classList.remove('active')
}
}
event.classList.add('active')
const getCategory = document.querySelector(`.category-${getId}`)
const categories = document.querySelectorAll('div[class ^= "category-"]')
for (i = 0; i < categories.length; i++) {
if (categories[i].hasAttribute('class')) {
categories[i].classList.remove('showCategory')
categories[i].classList.add('hideCategory')
}
}
getCategory.classList.remove('hideCategory')
getCategory.classList.add('showCategory')
}
.hideCategory {
display: none;
}
<div class="gallery" id="gallery">
<div class="work-category">
<button class="category active" id="windows">Fönster</button>
<button class="category" id="doors">Dörr</button>
<button class="category" id="furniture">Möbler</button>
<button class="category" id="misc">Övrigt</button>
</div>
<div class="category-windows showCategory">
<div class="imageslist">
<img src="assets/img_window.jpg" class="gallery-image">
</div>
</div>
<div class="category-doors hideCategory">
<div class="imageslist">
<img src="assets/img_door.jpg" class="gallery-image">
</div>
</div>
<div class="category-furniture hideCategory">
<div class="imageslist">
<img src="assets/img_furniture.jpg" class="gallery-image">
</div>
</div>
<div class="category-misc hideCategory">
<div class="imageslist">
<img src="assets/img_misc.jpg" class="gallery-image">
</div>
</div>
</div>
How Can I make this work?
This is a small solution based on the script you provided.
I have modified/added some attributes in order to simplify the script.
The logic is the following:
the button dictates which div is going to be display
var controls = document.querySelector('.work-category');
var gallery = document.querySelector('.gallery');
controls.addEventListener('click', displayCategory);
function displayCategory(ev) {
var selectedControl = controls.querySelector('.active');
var activeCategory = gallery.querySelector('.showCategory');
// exiting early if the selected control
// is the clicked button
if (ev.target === selectedControl) { return; }
var categoryId = ev.target.dataset.category;
var category = gallery.querySelector('.category-' + categoryId);
ev.target.classList.add('active');
category.classList.add('showCategory');
selectedControl.classList.remove('active');
activeCategory.classList.remove('showCategory');
}
.active {
background: skyblue;
}
.category-windows,
.category-doors,
.category-furniture,
.category-misc {
display: none;
}
.showCategory {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="gallery" id="gallery">
<div class="work-category">
<button class="category active" data-category="windows">Fönster</button>
<button class="category" data-category="doors">Dörr</button>
<button class="category" data-category="furniture">Möbler</button>
<button class="category" data-category="misc">Övrigt</button>
</div>
<div class="category-windows showCategory">
<div class="imageslist">
<img src="assets/img_window.jpg" alt="window" class="gallery-image">
</div>
</div>
<div class="category-doors">
<div class="imageslist">
<img src="assets/img_door.jpg" alt="door" class="gallery-image">
</div>
</div>
<div class="category-furniture">
<div class="imageslist">
<img src="assets/img_furniture.jpg" alt="furniture" class="gallery-image">
</div>
</div>
<div class="category-misc">
<div class="imageslist">
<img src="assets/img_misc.jpg" alt="misc" class="gallery-image">
</div>
</div>
</div>
</body>
</html>
From the code underneath, I want to remove the previous instances of codemirror, that is both "hello" and "hii" before I can add another instance.
The jQuery is not working.
Also, if I console.log($('#source').hasClass('.CodeMirror.cm-s-default')); it always shows me false, that is it can't find the classnames.
How can I do this?
If this is my html code:
<div class = "source" id="source" name="source">
<div class="result" id="result">
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
and my javascript, jquery is:
var first = document.getElementById("source").getElementsByClassName("CodeMirror cm-s-default");
var len1 = first.length;
for(var i = 0; i < len1; i++) {
if(first[i].className == "CodeMirror cm-s-default") {
first[i].parentNode.removeChild(first[i]);
}
}
you can do that to remove those elements contain .CodeMirror as a class:
javascript:
document.querySelectorAll(".CodeMirror").forEach(el => el.remove());
<div class="source" id="source" name="source">
<div class="result" id="result">
<div class="test">Not to remove</div>
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
Maybe simply like this?
$(function() {
$(".CodeMirror").remove();
});
Using jQuery can done like this:
$(".CodeMirror:contains('hello'), .CodeMirror:contains('hii')").remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="source" id="source" name="source">
<div class="result" id="result">
<div class="test">Not to remove</div>
<div class="CodeMirror cm-s-default">hello</div>
<div class="CodeMirror cm-s-default">hii</div>
</div>
</div>
I have the following HTML setup
<button>Start</button>
<div id="container">
<div>
<h2>First Div</h2>
<button>Test</button>
</div>
<div>
<h2>Second Div</h2>
<button>Test</button>
</div>
<div>
<h2>Third Div</h2>
</div>
</div>
I want to be able to press the start button and reveal the children divs of the div with the id of container one by one. So the first div would reveal itself on the first click and so on.
Here is the javascript that I have so far
$(document).ready(function() {
$("div").addClass("hidden");
});
var count = $("#container > div").length;
$(":button").click(function() {
if (count > 0) {
count--;
}
});
Any clever ideas?
Here is a fiddle
https://jsfiddle.net/afwonjr5/18/
I just want to hit the start button 3 times to reveal the 3 divs inside the container div.
Since you're using Jquery you can simply try it like this.
$("#container div").addClass("hidden");
var count = 0;
$("#start").click(function() {
count++;
$("#container div:nth-child("+count+")").toggle();
});
.hidden{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="start">Start</button>
<div id="container">
<div>
<h2>First Div</h2>
<button>Test</button>
</div>
<div>
<h2>Second Div</h2>
<button>Test</button>
</div>
<div>
<h2>Third Div</h2>
</div>
</div>
You can run the following code snippet :
document.querySelectorAll('#container > div').forEach(function(el) {
el.classList.add("hidden");
});
var startButton = document.getElementById("hey")
startButton.onclick = function(e) {
var arrDiv = Array.from(document.getElementById("container").getElementsByTagName("div"));
var firstDivHidden = arrDiv.filter(function(div) {
return div.classList.contains("hidden");
})[0];
if (firstDivHidden)
firstDivHidden.classList.remove("hidden");
}
.hidden {
display: none;
}
<button id="hey">Start</button>
<div id="container">
<div>
<h2>First Div</h2>
<button>Test</button>
</div>
<div>
<h2>Second Div</h2>
<button>Test</button>
</div>
<div>
<h2>Third Div</h2>
</div>
</div>
Hope it helps,
Best regards,
I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?
$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes
I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class
Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>