I have a page that has a couple image thumbnails that when clicked on they get cloned and appended into another element. The issue that I'm running in to is that all of the elements that I need to appendTo all have the same class. So if I click one thumbnail it gets appended to every single element that has the class view_full_img. Here is the HTML that I have to work with. Simply targeting these with different classes is not going to work for me, this HTML is generated by Drupal.
<div class="view_full_img"></div>
<div class="thumbs">
<div class="img blue"></div>
<div class="img green"></div>
<div class="img yellow"></div>
</div>
<div class="view_full_img"></div>
<div class="thumbs">
<div class="img red"></div>
<div class="img purple"></div>
<div class="img orange"></div>
</div>
Here's my jQuery..
$(".thumbs div").click(function(){
$(".view_full_img div").remove();
$(this).clone().appendTo(".view_full_img");
});
What I want to have happen is that when I click one of the .thumbs divs I want it to get cloned into the .view_full_img div that is directly above it. I've tried using combinations of closest() prev() parent() etc and just can't come up with something that works.
Here's a jsfiddle...
http://jsfiddle.net/dmcgrew/UeTv6/
You need parent(), then prev():
$(".thumbs div").click(function () {
$(this).parent().prev(".view_full_img").empty().append($(this).clone());
});
$(".thumbs div").click(function () {
var t = $(this);
t.appendTo(t.parent().prev(".view_full_img"));
});
Example
Related
here is the code:
$(function()
{
$('.sign1').click(function(){
$(this).addClass('good');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6 menu-item">
<div class="front">
<img class="center-block sign1" src="images/sign1.png">
</div>
</div>
</div>
</div>
</div>
It's supposed to add the class 'good' when clicking the image with class 'sign1'
but that never happens.
what's wrong with my code please?
you code works fine if you remove the link <a> surrounding the <img> element.
after jquery adds the good class to the image, the click even bubbles up to its parent <a> and this directs the browser to the new address: main.html.
so you won't have the time to see the change i suppose.
You can code like below
var targetImg = document.getElementsByTagName("img");
targetImg.classList.add("mystyle");
I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result
Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});
(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});
I have the following page structure (super simplified):
I can have X (dynamic) number of idle-variables.
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
My Problem:
When I click save within the second instance of "idle-variable", I want to hide the "var-container" of the previous DIV set. Again, there can be several idle-variable divs at any given time. Anytime the save button is clicked, it should close/hide the "var-container" of the previous div set.
I've tried:
$(".var-container").hide()
$(".var-container").prev().hide();
But they are not working. The first example closes/hides both and the second will close "idle-variable".
Any thoughts here?
Try to do this
$('a').on('click', function() {
$(this).prev().toggle();
});
If you want to hide the content div immediately before the save button when you click on it, use:
$('div.idle-variable a').click(function(){
$(this).prev().hide();
})
jsFiddle example
Consider the HTML:
<div class="idle-variable">
<div class="var-container">content 1</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 2</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 3</div>
Save
</div>
You can hide .var-container div before the link using the jQuery code:
$('a').click(function (e) {
$(this).prev('.var-container').hide();
});
You can test this here.
I have a list where need to insert the div for the list item, if use the simple .InsertBefore, will multiply infinitely elements
How can insert the div without duplicating other items?
Example: jsfiddle.net/HJCps
Html Code
<div id="sorter">
<div class="item item-1">
<div class="text">Item 1</div>
<div class="insert">Insert Text 1</div>
</div>
<div class="item item-2">
<div class="text">Item 2</div>
<div class="insert">Insert Text 2</div>
</div>
<div class="item item-3">
<div class="text">Item 3</div>
<div class="insert">Insert Text 3</div>
</div>
</div>
JS Code
$('.insert').insertBefore('.text');
DEMO
$('.item .text').each(function(){
$(this).next('.insert').insertBefore(this);
});
References
.next()
.each
$('.item .text') will find all the elements with class text contained in class item
$('.item .text').each will loop through every matched element one by one.
$(this) refers to the current element.
$(this).next('.insert') will find the next element with the class insert
$(this).next('.insert').insertBefore(this); will insertBefore current element the matched
next element with class insert
your code $('.insert').insertBefore('.text'); will insertBefore all the elements with class insert to all elements with class .text
Something like this might suffice (if I assume your main question right):
$('.insert').each(function() {
$this = $(this);
$this.parent().prepend($this);
});
Fiddle: http://jsfiddle.net/HJCps/1/
I know there are a lot of these threads but none seem to really fit me.
I have 5 dives with text like "this is div1, to div5". These are always gonna be shown.
And i have 5 hidden divs with text belonging to each div, that are gonna show if i click on my shown divs.
If I click div1, i want to show the hidden div1.
Right now I'm using a click function(jQuery) for every div which works but doesn't look very good in code. There has to be a better way. Any advise?
I do NOT want any of the divs to be hyperlinks, which seem to be the solution on a lot of similar threads on here.
EDIT: This is my current code.(can't get jsfiddle to work)
html
<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>
Jquery
$('showing_div').click(function() {
$('hidden_div').toggle();
})
This are the most used techniques:
target element using .index() and .eq()
<div id="clickables">
<div>CLICK 1</div>
<div>CLICK 2</div>
</div>
<div id="togglables">
<div>text 1</div>
<div>text 2</div>
</div>
$(function(){
$("#clickables div").click(function(){
var idx = $(this).index();
$('#togglables div').eq( idx ).slideToggle();
});
});
Pros: you can keep a really clean HTML markup, no need to assign additional classes or ID
Cons: don't put other elements inside the parents otherwise you might mess the index count
target element using .next() or other jQuery traversal methods
<div id="menu">
<div class="clickable">CLICK 1</div>
<div>text 1</div>
<div class="clickable">CLICK 2</div>
<div>text 2</div>
</div>
$(function(){
$("#menu .clickable").click(function(){
$(this).next('div').slideToggle();
});
});
target specific element using ID
<div class="clickable" id="_1" > CLICK 1 </div>
<div class="clickable" id="_2" > CLICK 2 </div>
<div id="togglable_1"> text 1 </div>
<div id="togglable_2"> text 2 </div>
$(function(){
$(".clickable").click(function(){
$("#togglable"+ this.id).slideToggle();
});
});
Pros: You can target elements unlogically positioned in the DOM
Cons: Verbose HTML; Unflexible and hardly maintainable code.
$('div').click(function() {
var text = $(this).text();
$('#'+text).show();
});
FIDDLE DEMO
As #Roko C. Buljan nicely showed there are many ways of doing it.
This is how I usually do using .data() jQuery function:
<div class="clickable" data-hidden="d1">CLICK 1</div>
<div id="d1" class="hidden">text 1</div>
<div class="clickable" data-hidden="d2">CLICK 2</div>
<div id="d2" class="hidden">text 2</div>
$(".clickable").click(function() {
$("#" + $(this).data("hidden")).toggle();
});
This way it does not matter how I organize my DOM elements. I only need to care to identify the right id in every data-hidden attribute.
Working demo