How can I get the html content of span with id of pageNum when I click on the button with id of id1 in Jquery?
In other words, is there any way to go to the closest "pagination" div and get "pageNum" from there?
<div class='pagination'>
<div class='pagination-tools'>
<span class='pageNum'>2</span>
</div>
</div>
</div>
<div>
<div>
<div>
<button id="id1"></button>
</div>
</div>
</div>
$('#2').on('click', function () {
var html = $('.pageNum').html();
});
Per my declarative suggestion comment:
$('#2').on('click', function () {
var html = $('[data-id="' + this.id + '"]').html();
});
Related
I have this code:
<div class="places-item">
<div class="places-item-img"></div>
<div class="places-item-header">
<h2>TEST</h2>
<div class="places-item-header-add">ADD</div>
</div>
</div>
document.querySelector('.places-item-header-add').addEventListener('click',function(){
var getHTML = this.outerHTML;
document.querySelector('body').innerHTML = getHTML
});
The current code only displays div.places-item-header-add, and I want the entire div.places-item to be displayed. Is that possible?
I think this is what you are asking for:
document.querySelector('.places-item-header-add').addEventListener('click',function(){
document.querySelector('body').innerHTML = this.parentElement.parentElement.outerHTML;
});
I can not get this code to work. I am trying to create a function that can listen to click on multiple elements with same class name, and then after click, toggle a specific class name on the next element with a specific class name.
I am trying to use a loop that loops through all the "buttons" (class="click-to-expand") and when you click a specific button, it should loop through the specific divs and toggle a class name on the next element with (class="expand").
Any help would be very appreciated!
var expandArray = document.querySelectorAll('.expand');
document.querySelectorAll('.click-to-expand').forEach(function(i) {
i.addEventListener('click', function(e) {
e.target.expandArray[0].classList.toggle("hidden");
})
});
.hidden {display: none}
<div>
<div>
<div class="click-to-expand">+</div>
</div>
</div>
<div class="expand hidden">asd</div>
<br>
<div>
<div>
<div class="click-to-expand">+</div>
</div>
</div>
<div class="expand hidden">asd</div>
<br>
<div>
<div>
<div class="click-to-expand">+</div>
</div>
</div>
<div class="expand hidden">asd</div>
You can try this
var expandArray = document.querySelectorAll('.expand');
var buttonArray = document.querySelectorAll('.click-to-expand');
document.querySelectorAll('.click-to-expand').forEach(function(i) {
i.addEventListener('click', function(e) {
const clickedBtnIndex = [...buttonArray].indexOf(e.target);
expandArray[clickedBtnIndex].classList.toggle("hidden");
})
});
The logic is to find out the index of the button which was clicked and use the same index to find the element in expandArray for which"hidden" should be toggled.
I was trying to remove the whole parent div if it doesn't have the wc-gallery class on it. What I have in my script is the reverse of what I need. Basically it hide everything that has the wc-gallery on it.
SCRIPT:
// Additional Scripts
$(window).load( function() {
$(".gallery-container2 .gallery-item .wc-gallery").hide();
});
$(".gallery-container2 p").click(function() {
var id = $(this).data('id');
$("[data-id=" + id + "].gallery-item .wc-gallery").toggle()
});
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').hide();
});
});
Basically this will work fine if I Hide all the containers and display the child div afterwards though my content won't render due to script conflicts. Only way to solve this without conflict is to load first all of the containers then hide() or remove() them.
SCRIPT: (conflict due to onload content rendering)
$('.gallery-container2').hide();
$(function(){
$(".gallery-item").each(function(){
$(this).children('.wc-gallery').parents('.gallery-container2').show();
});
});
HTML: (1st set is the one should be visible 2nd set is the one that needs to be remove or hide.)
<ul>
<li><div class="gallery-container2">
<p data-id="1723"><strong>some text</strong></p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery" style="display: none;"></div>
</div>
</div></li>
<li><div class="gallery-container2">
<p data-id="2455"><strong>View before and after</strong></p>
<strong></strong>
<div class="gallery-item" data-id="2455">
<div><div></div></div>
</div>
</div></li>
</ul>
Loop through the '.gallery-container2' element and find out whether it has '.wc-gallery' children. if not hide the element.
$('.gallery-container2').each(function(){
var $this = $(this);
//find element with 'wc-gallery' class
var hasGallery = $this.find('.wc-gallery').length > 0;
if(!hasGallery){
$this.hide();
}
});
Pure JS you might do like this in ES6 terms.
var divsToHide = document.querySelectorAll("div div :not(.wc-gallery)");
for (var div of divsToHide) div.parentElement.parentElement.style.display = "none";
<div class="gallery-container2">
<p data-id="1723"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1723">
<div class="wc-gallery">first container</div>
</div>
</div>
<div class="gallery-container2">
<p data-id="1724"><strong>some text</strong>
</p>
<div class="gallery-item" data-id="1724">
<div>
<div>second container</div>
</div>
</div>
</div>
Try this. If div has children with class .wc-gallery than it will show the parent otherwise hide the parent.
$(function () {
$(".gallery-item").each(function () {
if($(this).children('.wc-gallery').length > 0)
$(this).parents('.gallery-container2').show();
else
$(this).parents('.gallery-container2').hide();
});
});
I have a div setup like so:
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
I have the following code:
$('.show-comments').click(function(e){
e.preventDefault();
$('.comments-wrapper').slideToggle('slow');
});
As you would assume, the code works but on a class basis. I'd like for it to open up only the .comments-wrapper of its associated id (i.e. open slideToggle comments2 if content 2 button is clicked and so on and so on).
How would I do this?
$('.show-comments').click(function(e){
e.preventDefault();
$(this).closest(".content").next('.comments-wrapper').slideToggle('slow');
});
Note that this is dependent on the .content element being immediately followed by the .comments-wrapper.
If you have access to modify the html itself, I would suggest adding a wrapper element and then doing the following to avoid the reliance on the exact order of elements:
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content1"></button>
</div>
<div class="comments-wrapper" id="comment1"></div>
</div>
<div class="wrapper">
<div class="content">
<button class="show-comments" id="content2"></button>
</div>
<div class="comments-wrapper" id="comment2"></div>
</div>
$(this).closest(".wrapper").find('.comments-wrapper').slideToggle('slow');
This way, if you add an element between the .content and the .comments-wrapper it does not break the code.
You can do this:
$(this).parent("div").next('.comments-wrapper').slideToggle('slow');
This will find the related div of class .comments-wrapper and slide toggle.
And a fiddle: http://jsfiddle.net/xCJQB/
$('.show-comments').click(function (e) {
e.preventDefault();
var num = this.id.match(/\d+$/)[0];
$("#comment" + num).slideToggle('slow');
});
Demo ---> http://jsfiddle.net/7pkyk/1/
Use this context
$(this).closest('.comments').next('.comments-wrapper').slideToggle('slow');
If it is not the immediate element then you might try this as well
$(this).closest('.comments')
.nextAll('.comments-wrapper').first().slideToggle('slow');
you can add a common class to associate a button with a div.
html:
<div class="content">
<button class="show-comments group1" id="content1"></button>
</div>
<div class="comments-wrapper group1" id="comment1">1</div>
<div class="content">
<button class="show-comments group2" id="content2"></button>
</div>
<div class="comments-wrapper group2" id="comment2">2</div>
javascript:
$('.show-comments').click(function(e){
var associate = $(this).attr('class').match(/group\d+/).pop();
var selector = '.comments-wrapper.' + associate;
e.preventDefault();
$(selector).slideToggle('slow');
});
http://jsfiddle.net/uMNfJ/
At runtime I have a loop that creates a number of divs with the same class depending on the number in the database.
<div class="show">....</div>
<div class="show">....</div>
<div class="show">....</div>
I want to display this div using the slideToggle() function with jQuery. For each of these I have a separate hyperlink which when clicked should display the div. Also there are a number of tags in between the hyperlink and the div that I want to toggle.
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
<div>
<div>
View
</div>
<br />
</div>
<div>
<div class="clear"></div>
</div>
<div class="show">....</div>
$(function () {
$(".display").click(function(){
$(".show").slideToggle();
return false;
});
});
Naturally when this is called each div layer is toggled, regardless of which hyperlink is clicked. I want to just toggle the div closest to the given hyperlink.
Thanks in advance.
Find the <div> relatively by going from this using tree traversal functions, like this:
$(function () {
$(".display").click(function () {
$(this).next().slideToggle();
return false;
});
});
In this case since it's the next sibling element we care about, use .next(), if the structure is different from the question, you'll need to adjust it accordingly, go get from the <a> you clicked on (this) to the <div> you want to toggle.
$(function () {
$(".display").click(function () {
$(this).next.(".show").slideToggle();
return false;
});
Or while you loop through creating your divs, can you add (for example) a rel value that's incremented by one every time? Giving you something like...
View
<div class="show" rel="1">....</div>
View
<div class="show" rel="2">....</div>
View
<div class="show" rel="3">....</div>
This would then link the two divs so that you could get the rel value of your clicked element and use that to identify the shown / hidden div.
<script type="text/javascript">
$(function () {
$(".display").click(function () {
var element_id = $(this).attr('rel');
$(".show").attr('rel', element_id).slideToggle();
return false;
});
});