In my HTML there are eight div. I was able to get the number of the div using jQuery and insert it into the .num div element.
However when I delete one of the div by clicking the delete button, the number of divs in the span retrieved through jQuery won't update to the current number of divs remaining. It will still show 8.
How can I get the current number of div elements left in the DOM immediately after clicking the button?
setTimeout(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
```
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
The problem is because you're using setTimeout(), which only runs once after the specified delay.
For the pattern you're using to work you need to use setInterval() instead, which will run repeatedly at the set delay:
setInterval(() => {
if ($(".delete div").length > 0) {
$(".num span").html($(".delete div").length);
}
}, 100);
$("button").click(function() {
$(".delete div:last-child").remove();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
However, using a timer for this is not ideal. As the number of div elements is only affected when the button is clicked, just update the .num span element in that event handler:
var $span = $(".num span").html($(".delete div").length);
$("button").click(function() {
$(".delete div:last-child").remove();
$span.html($(".delete div").length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="delete">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
<div class="num">Number of div: <span>0</span></div><br>
<button>delete</button>
Related
I'd expect this to pop up an alert for any div I click inside the section id playGrid, but it does nothing.
<div id="playGrid" class="w">
<section>
<div id="0_0"></div>
<div id="0_1"></div>
<div id="0_2"></div>
<div id="0_3"></div>
<div id="1_0"></div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
JavaScript
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el){
el.addEventListener('click', function() {
alert(this.id);
});
});
I think the problem is that your code runs before the document is fully loaded. To run your code after page is loaded add event listener for 'DOMContentLoaded' event:
document.addEventListener('DOMContentLoaded', function(){
document.getElementById("playGrid").querySelectorAll('section div').forEach(function(el) {
el.addEventListener('click', function() {
alert(this.id);
});
});
});
https://codepen.io/mikhailsidorov/pen/BaoPKoX
two options add content like so
<section>
<div id="0_0">content</div>
<div id="0_1">content</div>
<div id="0_2">content</div>
<div id="0_3">content</div>
<div id="1_0">content</div>
<div id="1_1"></div>
<div id="1_2"></div>
<div id="1_3"></div>
<div id="2_0"></div>
<div id="2_1"></div>
<div id="2_2"></div>
<div id="2_3"></div>
<div id="3_0"></div>
<div id="3_1"></div>
<div id="3_2"></div>
<div id="3_3"></div>
</section>
</div>
or use css by adding a class .content to all your divs :
.content{
height: 10px;
width:10px;
}
Something like this should work. Also, make sure your script is being executed after the page loads, not before. Use the defer tag on your <script> element or move the <script> element to the end of your body.
[ ...document.querySelectorAll('#playGrid section div') ].forEach((div) => {
div.addEventListener('click', (event) => {
alert(event.currentTarget.id);
});
});
I need to make a button that views three consequent posts
when I click "view all" the three "div"s should show up
I need to make the three 'div's show up if I click the view all button
so I am using jquery here
$('.posts .repeat-grid').slice(0, 3).show();
$('#view-all').on('click', function() {
$('.posts .repeat-grid:hidden').slice(0, 1).slideDown();
if ($('.posts .repeat-grid:hidden').length === 0) {
$('#view-all').fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
any idea why it is not working?
You Can Try this if that's what you mean
$('#view-all').on('click', function() {
$('.posts').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
Say I have 50 div, like this:
<div class="btn1"></div> //Toggles the first container to appear
<div class="btn2"></div> //Toggles the second container to appear
<div class="btn3"></div> //Toggles the third container to appear
And another 50 div that contain information, like this:
<div class="container-1"><h1>This is the first container</h1></div>
<div class="container-2"><h1>This is the second container</h1></div>
<div class="container-3"><h1>This is the third container</h1></div>
Is it possible to make the corresponding div toggle when each button is clicked with just one function? I have read a little about delegation and operating on parents/siblings but it only seems to work on multiple buttons opening the same container, rather than each button opening each container.
Somehow I don't think writing a function for every div is the way to go.
yes it is possible. Basically you need to add a reference to clicked object so click event will know what to show/hide
$(function() {
$('.btn').on('click', function(e) {
var $dataTarget = $($(this).data('target'));
$dataTarget.show().siblings('.container').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn1" data-target=".container-1"></div> //Toggles the first container to appear
<div class="btn btn2" data-target=".container-2"></div> //Toggles the second container to appear
<div class="btn btn3" data-target=".container-3"></div> //Toggles the third container to appear
<div class="container container-1">
<h1>This is the first container</h1>
</div>
<div class="container container-2">
<h1>This is the second container</h1>
</div>
<div class="container container-3">
<h1>This is the third container</h1>
</div>
This will show the container targeted, then will hide other containers.
Use starts with selector ^ Document here
Use data-* to store corresponding div on button.
Select the data-* then use as selector to show
$('div[class^=container]').hide();
$('div[class^=btn]').click(function() {
$('div[class^=container]').hide();
var thisclass = $(this).attr("data-class")
$('.' + thisclass).show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn1" data-class="container-1">1</div>
<div class="btn2" data-class="container-2">2</div>
<div class="btn3" data-class="container-3">3</div>
<div class="container-1">
<h1>This is the first container</h1>
</div>
<div class="container-2">
<h1>This is the second container</h1>
</div>
<div class="container-3">
<h1>This is the third container</h1>
</div>
You can use index and eq to do this
$("[class*='btn']").click(function(){
$("[class*='container-']").eq($(this).index()-1).toggle();
})
[class*="btn"]{
width:150px;
height:20px;
border:2px solid #000;
display:inline-block;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="container-1">
<h1>This is the first container</h1>
</div>
<div class="container-2">
<h1>This is the second container</h1>
</div>
<div class="container-3">
<h1>This is the third container</h1>
</div>
you can use something like this
$(document).ready(function() {
$("div[class^='btn']").each(function() {
$(this).click(function() {
var str = $(this)[0].className;
$(".container-" + str.substring(3, str.length)).toggle();
});
});
});
Find all the class which starts with btn and apply a click event to it..
and based on the number hide the corresponding container class.
Here is the full code:
$(document).ready(function() {
$("div[class^='btn']").each(function() {
$(this).click(function() {
var str = $(this)[0].className;
$(".container-" + str.substring(3, str.length)).toggle();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn1">aaaa</div> //Toggles the first container to appear
<div class="btn2">bbbb</div> //Toggles the second container to appear
<div class="btn3">cccc</div> //Toggles the third container to appear
<div class="container-1">
<h1>This is the first container</h1>
</div>
<div class="container-2">
<h1>This is the second container</h1>
</div>
<div class="container-3">
<h1>This is the third container</h1>
</div>
(Source: fiddle https://jsfiddle.net/fxabnk4o/17/)
I have 2 identical parent divs with different content. If parent div has more than 3 child divs, at the end of the div should be displayed "show more" text that would slide all remaining hidden divs. I am new to JavaScript and jQuery and I couldn't completely understand selectors. Here is my code:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
<span class="showhide">Show-hide</span>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<span class="showhide">Show-hide</span>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<span class="showhide">Show-hide</span>
the result should display like this:
1
2
3
show-hide
1
2
1
2
3
show-hide
Here is the script:
$('.parent div:nth-child(n+4)').hide();
var l = $('.parent div').length;
if (l > 3) {
$('.showhide').show();
} else {
$('.showhide').hide();
}
$(".showhide").click(function() {
$this.find(".parent div:nth-child(n+4)").toggle('slide');
});
Only the first part of the code works. It hides divs more than 3 in each parent div. But the hiding text and toggle don't work.
I have tried multiple variations, like placing the span inside parent div, changing selectors to .closest, also tried to use :gt() instead of :nth-child but none worked.
You can do like this,
$(".parent").each(function() {
$(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
$(this).prev().find(".child:gt(2)").slideToggle();
});
Fiddle
.gt() selector will return the elements whose index is greater than the specified parameter
If you want to change the text after toggling, use this code,
$(".parent").each(function() {
$(this).find(".child:gt(2)").hide();
});
$(".showhide").click(function() {
var obj = this;
$(this).prev().find(".child:gt(2)").slideToggle(function() {
if ($(this).is(":visible"))
$(obj).text("hide");
else
$(obj).text("show more");
});
});
Edited Fiddle
Note that, you need to use the call back function of slideToggle to change the text, since slideToggle is asynchronous.
Final Fiddle
You can hide it with css:
.parent div:nth-child(n+4) {
display: none;
}
and use jquery to toggle the class to make it visible/hidden.
$('.parent').filter(function(){
return $(this).children().length <= 2;
}).next('.showhide').hide();
$('.showhide').click(function() {
$(this).text(function(i, txt) {
console.log(txt);
return txt === "Show" ? "Hide" : "Show";
});
$(this).prev('.parent').find('div:hidden, div.show').toggleClass('show').stop().slideToggle();
});
span {
cursor: pointer;
}
.parent div:nth-child(n+4) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
<span class="showhide">Show</span>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
</div>
<span class="showhide">Show</span>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
<span class="showhide">Show</span>
I want if some body add div with class "post-image". It will automatically move it before div with class "post-header" and do this function on each div with class single-post.
E.g. this is main //'post-image' after 'post-header'
<div class='single-post'>
<div class='post-header'>Title</div>
<div class='post-image'><img src='.../img1.png'/></div>
</div>
<div class='single-post'>
<div class='post-header'>Title</div>
<div class='post-image'><img src='.../img2.png'/></div>
</div>
and i want this like this // 'post-image' before 'post-header'
<div class='single-post'>
<div class='post-image'><img src='.../img1.png'/></div>
<div class='post-header'>Title</div>
</div>
<div class='single-post'>
<div class='post-image'><img src='.../img2.png'/></div>
<div class='post-header'>Title</div>
</div>
Maybe like that:
$(".post-header").each(function (ind, el) {
$(this).siblings(".post-image").each(function (ind, el2) {
$(el).before($(el2));
});
})