I am trying to figure out how to select a particular element with a certain class name within it's parent div, after a click event.
<div id="news">
<div class="one">
<p>news</p>
</div>
<div class="two">
</div>
</div>
<div id="users">
<div class="one">
<p>users</p>
</div>
<div class="two">
</div>
</div>
my simple jquery is as follows:
$(".clickme").on("click", function () {
//how to select only the element with the class "one" within the parent and show it
});
My failed attempts have been trying to use the parents and closest methods and code like $(this).parents().find(".one").show();
Any help would be great!!
Working Demo
try this
$(this).parent() refers to parent div
.prev('one') to previous sibling with class .one
$(this).parent().prev(".one").show();
Try with .prev()
$(this).parent().prev(".one").show();
See the DEMO
I would traverse it like this.
$('.clickme').click(function(){
$(this).parent().siblings().eq(0).show();
});
fiddle
Related
<div id="target">
<div>here</div>
<div>select this<div>it has more div within</div></div>
<div></div>
How to get the last child of target? I tried
$('#target').find('div:nth-child(2)')
Is this even correct? It seems like it will also select div within my target, which is what I don't want, hmm.
$('#target').children().last();
Use :last-child pseudo-class selector with direct child selector(>).
$('#target > div:last-child')
console.log($('#target>div:last-child').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
To select the second child use :nth-child(2) along with direct child selector(>) to avoid nested element.
$('#target > div:nth-child(2)')
console.log($('#target > div:nth-child(2)').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
Let me fix your markup first:
<div id="target">
<div>here</div>
<div>select this
<div>it has more div within</div>
</div>
</div>
As far as I understood, you only want to select the text "select this". I am not sure what you are trying to do, but if you only want to get the text. You can just manipulate the string getting it using text() and then remove the <div>...</div> part. But, if you are trying to put some css attribute like color onto this node. You need to fix your div because of the cascading feature.
So instead, you might want to do this:
<div id="target">
<div>here</div>
<div>
<div>select this</div>
<div>it has more div within</div>
</div>
</div>
and then
$("#target").children().last().children().first();
I know there are tons of posts out here about this but I have yet to find anything that works. I think because how deep my button is nested versus the postion of the div I am trying to effect.
Most of this is generated dynamically so I can't target IDs but I can target classes.
I have tried a number of approaches. Including:
$('div.hold:first').addClass('skinSelected');
AND
$(this).parent.parent.parent.prev('.hold').addClass('skinSelected')
AND
$(this).parent.prev('.hold').addClass('skinSelected')
This does the job to the first div with class hold but I have numerous divs with class "hold"
Here's my HTML:
<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
<div>
<span>....</span>
<div>....</div>
<div>
<h3>...</h3>
<p>...</p>
select
</div>
</div>
</div>
</li>
Here's my javascript:
<script type="text/javascript">
function passSkinID() {
$('div.skinSelected').removeClass('skinSelected');
$(this).prevAll('.hold:first').addClass('skinSelected')
}
</script>
And here is my css
<style>
.skinSelected {
background-size:cover;
width:100%;
background:#2d67a3;
color:#FFFFFF;
display:block !important;
}
</style>
Thanks in advance for any insight!
First of all, you cannot use $(this) as it reffers to the jQuery's window object. You should pass this on click, and then wrap it into jquery object.
HTML:
select
Script:
function passSkinID(el) {
$('div.skinSelected').removeClass('skinSelected');
// use passed element instead of $(this):
$(el).closest('li').find('.hold').addClass('skinSelected');
}
DEMO
I would however do it this way:
<a href="#" class="my-btn btn btn-primary" >select</a>
Script:
$('.my-btn').click(function(e) {
e.preventDefault();
$('div.skinSelected').removeClass('skinSelected');
$(this).closest('li').find('.hold').addClass('skinSelected');
});
DEMO
Because the event is triggered on a child of a <li> tag that also contains the elements you want to manipulate, you have to travel up the DOM to that parent with closest() then find all children that have the required class:
$(this).closest('li').find('.hold').addClass('skinSelected')
This will only work if between <li> and the link you don't have other <li>'s, and if the other .hold elements that you don't want to add the class to are outside this particular <li> tree. I imagine that your DOM structure is like this:
<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
<div>
...
<div>
...
select
</div>
</div>
</div>
</li>
<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
<div>
...
<div>
...
select
</div>
</div>
</div>
</li>
...
For the first you need and equl in you div elemnt with class "hold"
You can do this as i have done in this jsBin http://jsbin.com/lujekojami/1/edit?html,css,js,output
I hope it helps :)
just a quick one. I want to change the order of two specific divs in the markup. Both divs have childs.
<div class="first">
<elem>
<elem> </elem>
</elem>
</div>
<div class="second">
<elem>
<elem> </elem>
<elem>
</div>
and want it to change to .second then .first.
I tried:
$('.first').insertAfter('.second');
which works, but without the childs. Is there any way to achieve what I want with .insertAfter() or is there anything else I need to do?
Thanks
Insert after doesn't remove children elements,
check this fiddle
<div class="first">
<div>child of first</div>
<div>another of first</div>
</div>
<div class="second">
<div>child of second</div>
</div>
The documentation says "If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved after the target (not cloned) and a new set consisting of the inserted element is returned"
In the simplest case (select by id - insert after div with a given id), my tests show that all the children come along with it.
I have a page what will have a few buttons on it and on a click of a button I basically need it to swap divs out - I have them wrapped in a parent div with an id and then each div that will be replaced will get it's own id as well. I got this code to work for swapping, but it will be tedious and not good code at all to do this if we end up with 30 or so pairings.
So how do I clean this up so on a click, the active div is set to display: none, and the one clicked is set to display: block?
Here is my jQuery code that is working for now. For this I want the macaroni to display and the farfalle to hide.
$('#macaroniButton').click(function(){
$('#macaroni').toggle();
$('#farfalle').toggle();
});
<div id="topchanger">
<div id="farfalle">
.....
</div>
<div id="macaroni">
.....
</div>
</div>
<div class="circlerow">
<div class="circlepasta" id="macaroniButton">
......
</div>
<div class="circlepasta" id="AnotherButton">
......
</div>
</div>
</div>
You could start with this. Expand my answer accordingly.
$('#macaroniButton').click(function(){
$("#macaroni").show().siblings('div').hide();
});
You can give a class to all the div that you want to show/hide and before handling a click, hide all div with that class. Let's say you give it a class 'item':
<div id="topchanger">
<div id="farfalle" class="item">
.....
</div>
<div id="macaroni" class="item">
.....
</div>
</div>
and your javascript will be:
$('div.item').click(function(){
$('div.item').hide();
$(this).show();
});
Note that $(this) refers to the item that was just clicked.
Hope it hepls
How do I move the contents of a div to the contents of another div?
I want to move .sidebar from .post to .carousel. How to do it by using javascript?
I want to go from this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post">
<div class="sidebar"></div>
</div>
</div>
</div>
</div>
to this:
<div class="container">
<div class="carousel">
<div class="row">
<div class="post"></div>
<div class="sidebar"></div>
</div>
</div>
</div>
document.getElementsByClassName('row')[0].appendChild(document.getElementsByClassName('sidebar')[0]);
I'd suggest, on the off-chance you've more than one element with that class (and assuming that in all instances they should be inserted after their parentNode):
$('.sidebar').each(function(){
$(this).insertAfter(this.parentNode);
});
JS Fiddle demo.
References:
each().
insertAfter().
Assuming you only have only one such occurrence, you can use plain JavaScript:
var sidebar = document.getElementsByClassName('sidebar')[0];
// move after parent node
sidebar.parentNode.parentNode.appendChild(sidebar);
The appendChild() function moves rather than copies existing elements from their previous location in the tree. To perform a copy you would need to clone the respective elements first.
Try to use JQuery Draggable() and Droppable() functions.
See the Demo...
Droppable | JQuery UI