I am new to jQuery so please help me with the output.
Below is the HTML code used for reference.
<html>
<body>
<div id="level1">
<p>
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</p>
</div>
</body>
</html>
When I used following as script
<script type="text/javascript">
$(document).ready(function (){
var div = $("#level1").find("div").each(function(){
alert($(this).attr('id'));
});
});
</script>
The result was 5 alerts with id of each div
But when I used
<script type="text/javascript">
$(document).ready(function(){
var div = $("#level1").find("span > div").each(function(){
alert($(this).attr('id'));
});
});
</script>
There were only two alert for level 1.2.1 and 1.2.2
I was wondering why there was no alert for 1.1.1 and 1.1.2 as they also have span as their parents?
Thanks in advance.
If divs can't be child of
then why is
<p>
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
</p>
Working fine ??
Because of your incorrect HTML.
The browser is going to generate your html as followed.
<p>
<span id="level1.1">
</span>
</p>
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
Because a div can't be a child of a p
If you remove the first <p> in your code, you wil get an alert of the 4 levels sub levels.
divs cannot be children of p in HTML
Change your HTML markup with the following:
<div id="level1">
<span id="level1.1">
<div id="level1.1.1"></div>
<div id="level1.1.2"></div>
</span>
<span id="level1.2">
<div id="level1.2.1"></div>
<div id="level1.2.2"></div>
</span>
<div id="level1.3"></div>
</div>
and you should yield the expected results !
Because your HTML structure is not correct this how your structure is populated :
.find() method only travels a single level down the DOM tree.
Here you can find it.
The .find() and .children() methods are similar, except that the .find() method only travels a single level down the DOM tree.
Related
I am trying to detach the div from the relevant parent and then append to the same parent div.
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
var copyDivData = jQuery('.variations_form.wvs-archive-variation-wrapper').detach();
copyDivData.appendTo('.product-variations');
}
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Expected result.
But after running the above code I am getting the following result.
.detach Description: Remove the set of matched elements from the DOM.
That means you append all the detached elements to every product-variations element ..So
You need to loop through the variations_form.wvs-archive-variation-wrapper elements by using .each()
Also you can use .appendTo() directly
//Jquery Code
jQuery(function(){
moveColorDots();
});
function moveColorDots(){
jQuery('.variations_form.wvs-archive-variation-wrapper').each(function(){
var product_variations = jQuery(this).next('div').find('.product-variations');
jQuery(this).appendTo(product_variations);
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 1
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
<div class="pp-content-post">
<div class="variations_form wvs-archive-variation-wrapper">
some data here 2
</div>
<div class="product-box">
<div class="glasses-sec">
<h3>title</h3>
</div>
<div class="product-variations"></div>
</div>
</div>
Note: This line of code var product_variations = jQuery(this).next('div').find('.product-variations'); is depending on your html structure it works for the posted html here .. But if you've another html structure you need to modify it to catch the desired element
I have the below HTML
<div name="taskNotificationsDiv">
<div class="notificationCard">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
</div>
And I have the below script which when x is clicked removes the container from the parent.
$(".taskNotificationClose").click(function (){
this.parentNode.parentNode
.removeChild(this.parentNode);
return false;
});
What I am looking for is also removing the hr which is below the div container..Can someone please have a look and let me know how it can be done.
Here's the fiddle [Fiddle][1]
I tried with the below code to find nearest hr and remove it from the parent but it's throwing an error
var $hr = $(this).next('hr');
this.parentNode.parentNode.removeChild($hr);
Thanks
[1]: https://jsfiddle.net/so3k2hpq/
You can use .next() function. A better approach to solve the problem with JQuery:
$(".taskNotificationClose").click(function (){
$(this).parent().next("hr").remove();
$(this).parent().remove();
return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div name="taskNotificationsDiv">
<div class="notificationCard" style="color:red;">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard" style="color:blue;">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
<div class="notificationCard" style="color:green;">
<span class="taskNotificationClose">x</span>
Test
</div>
<hr>
</div>
You can move 'hr' tag inside each div. It will solve your problem.
JQuery .next(element) can do this
$(".taskNotificationClose").click(function (){
$(this).parent().next("hr").remove();
$(this).parent().remove();
return false;
});
The reason for your earlier error, is that you removed the first sibling first before calling .next()
I'm learning Javascript and jQuery and I'm stuck at this one problem. Let's say my code looks like this:
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Now, if i click one of the div's, i want the other ones to disappear.
I know, I could create 4 functions for each one of them with on.click hey and display none with how , are and you. But is there a easier way? I bet there is, with classes maybe?
Thanks for responding!
Use siblings to get reference to its "brothers".
Given a jQuery object that represents a set of DOM elements, the .siblings() method allows us to search through the siblings of these elements in the DOM tree and construct a new jQuery object from the matching elements.
$('div').click(function(){
$(this).siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Or you can hide all the other div which not the clicked element using not
Remove elements from the set of matched elements.
$('div').click(function() {
$('div').not(this).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
You can just hide siblings() of clicked div.
$('div').click(function() {
$(this).siblings().fadeOut()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey">hey</div>
<div id="how">how</div>
<div id="are">are</div>
<div id="you">you</div>
Yeah there are some easier ways and I could tell a one from it,
Set a common class to all the elements that you are gonna target,
<div class="clickable" id="hey"> hey </div>
<div class="clickable" id="how"> how </div>
<div class="clickable" id="are"> are </div>
<div class="clickable" id="you"> you </div>
And you have to bind a single click event by using a class selector,
$(".clickable").on("click", function(){ });
Now use the .siblings() functions to hide the required elements,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").hide();
});
But using a toggle instead of hide would sounds logical,
$(".clickable").on("click", function(){
$(this).siblings(".clickable").toggle();
});
Since you can do the same operation over all the elements.
You can use not to avoid element and this will indicate current instance.
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).hide("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
Assign a class to each of the elements:
<div id="hey" class='sth'> hey </div>
<div id="how" class='sth'> how </div>
<div id="are" class='sth'> are </div>
<div id="you"class='sth' > you </div>
And write a js function onclick.
Remove class 'sth' from 'this' element in this function
Hide all elements with class 'sth' $('.sth').hide();
For this example - you don't need to add any further selectors to target the div's although in reality - this solution wwould cause all divs on the page to be affectecd - adding classes would be my actual suggestion: - but this works for this example. Click a div and all divs are hidden then the clicked one is shown. I also added a reset button to allow all divs to reappear.
$('div').click(function(){
$('div').hide();
$(this).show();
});
$('#reset').click(function(){
$('div').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
<hr/>
<button type="button" id="reset">Reset</button>
$(document).ready(function(){
$("div").on("click",function(){
$("div").not(this).toggle("slow");
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hey"> hey </div>
<div id="how"> how </div>
<div id="are"> are </div>
<div id="you"> you </div>
how to hide div on object of div click
I am adding jquery path than my html code is here as it is and than after I am apply script to delete label class="main" with span and div class close1
but it's not perform
<label class="main ">
<span class="tag-value">mysql </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">codeigniter </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">ajax </span>
<div class="close1">X</div>
</label>
<label class="main ">
<span class="tag-value">jquery </span>
<div class="close1">X</div>
</label>
<script>
$(function(){
$(".close1").click(function(){
$(this).parent(".main").hide();
});
});
</script>
Check that JQ lib. is in the head of you r document, also, you can probably just use .parent()
http://jsfiddle.net/Yx4EU/
<script>
$(function(){
$(".close1").click(function(){
$(this).parent().hide();
});
});
</script>
If this does not work, I suggest adding a fiddle for someone to look at.
Check this out: http://jsfiddle.net/8436y/1/
In this fiddle you will notice I haven't defined the parent, since it is not necessary (in this case).
http://jsfiddle.net/8436y/5/
here I have used the .closest() to define the closest class="main" , which also works ;)
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
jQuery(".link").click(function()
{
jQuery("div.content").slideToggle(500);
});;
});
</script>
How to expand only the div which is linked to the specific link?
Edit:
Its done like this
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
<div class="content">
<div class="comment">
<div class="bar">
<a class="link">#</a>
</div>
</div>
</div>
EDIT 2:
You changed your HTML. Now do this:
jQuery(this).closest('div.comment').next('div.content').slideToggle(500);
But wait! Now you have 2 different div.link elements in different relation to .content elements. Is this your actual HTML markup?
You could also do this:
jQuery(this).closest('div.content').slideToggle(500);
Please provide your actual HTML.
EDIT:
Based on updated question, do this:
jQuery(this).parents('div.blaat1').eq(1).next().slideToggle(500);
How to expand only the div which is linked to the specific link?
How are they linked?
If the div is a descendant, do this:
jQuery(this).find('div.content').slideToggle(500);
If the div is a an ancestor, do this:
jQuery(this).closest('div.content').slideToggle(500);
If the div is the next sibling, do this:
jQuery(this).next().slideToggle(500);
If the div is the previous sibling, do this:
jQuery(this).prev().slideToggle(500);
Without seeing your HTML structure, we can only guess at the solution.
For this HTML:
<div class="blaat1">
<div class="blaat1">
<a class="link">#</a>
</div>
<div class="blaat2">
<a class="link">#</a>
</div
</div>
<div class="content">
<div class="otherdivs">
<div class="blaat1_div"><p>Hi – I'm blaat 1</p></div>
<div class="blaat2_div"><p>Hi – I'm blaat 2</p></div>
</div>
</div>
Use this JS:
<script type="text/javascript">
$(document).ready(function() {
$(".content").hide();
$(".link").click(function() {
var blaat = $(this).parent().attr("class");
$(blaat+"_div").slideToggle(500);
});;
});
</script>
I haven't tested that, but it should work.
Try this:
$(".link").click(function(){
$(this).parents('div.content').slideToggle(500);
});;