my goal is to let the user to choose the background, but my js doesn;t work.
<div class="step">
</div>
<div id="images">
<img src="" data-src="">
<img src="" data-src="">
<img src="" data-src="">
<img src="" data-src="">
</div>
<div class="step">
</div>
<div class="step">
</div>
The images div is dynamic and should always change the image of the .step just before.
here is my buggy js:
$(document).on('click', '#images img', function(){
var src = $(this).data('src');
$(this).before().find('.step').css("background" , "url("+src+")");
});
I think what you are selecting is wrong and before() appends elements.
$(this).parent().prev('.step').css("background" , "url("+src+")");
basic explanation
$(this) //the image
.parent() // the div #images
.prev('.step') //get the previous sibling with the class step
.css("background" , "url("+src+")");
If you want all of the .step elements, you would use .siblings(".step") instead of .prev(".step")
I think you want prev(), not before()
$(this).parent() will give you the div which holds the images & .prev('.step') gives you the previous element with class step. before() is only used to insert before each element in the set of matched elements.
$(this).parent().prev('.step').css("background" , "url("+src+")");
The .before() method inserts content, it doesn't find an earlier element. You want the .prev() method, noting that it finds the previous sibling so you need to traverse via the .parent():
$(this).parent().prev().css("background" , "url("+src+")");
Demo: http://jsfiddle.net/DBRkS/
Note that .prev() doesn't search backwards until it finds a matching element, it selects the immediately preceding sibling if it matches the selector you supply, otherwise it returns nothing. So for the html you've shown it would work the same with or without the ".step" selector.
Related
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
How do I append .div4 to .div1 onLy on its parent container without it also appends to the next container with the same div? I tried the basic jQuery appendTo but this sets .div4 on all the .div1 elements in my DOM.
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
<div class="container">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
Update: changed invalid HTML. Using this script now (replace dummy divs with my actual divs):
var $this = $('span.conditionHilite.refurbHilite');
$this.appendTo($this.closest('.itembox.centerbox.col.span_1_of_3').find('.image.col1'));
Problem now is that if my page consist of more then one container with"span.conditionHilite.refurbHilite" it will append the total amount of these elements inside each parentcontainer instead of just the one.
If you tried to append an element to more than one target element with jQuery, it will clone that element however many times is required. If you only want to append .div4 to the .div1 element within its same container element, you'll need to explicitly select that element. Something like this:
var $this = $('.div4');
$this.appendTo($this.closest('.container').find('.div1'));
That uses .closest() to traverse up the DOM tree to find the containing element, then .find() to look within that containing element for the .div1 element. With your current DOM structure that will only ever be a single element, so the .div4 element is simply moved, without any clones being created.
Note: As Rory McCrossan pointed out, you're re-using IDs in your HTML and it is therefore invalid. I've used a class selector in the code above on the assumption that you'll fix your invalid HTML by switching from id="container" to class="container". If - as stated in the comments - you absolutely can't change that, then the '[id="container"]' selector should work instead.
I know I can write:
$('.2020').css("padding", "20px");
But how do I write it like:
$('.a').children('img').children('.2020').css("padding", "20px");
<div class"a">
<img class="2020" src="img/swatch/2020.jpg" >
<img class="2021" src="img/swatch/2021.jpg" >
<img class="2022" src="img/swatch/2022.jpg" >
</div>
http://jsfiddle.net/ssRYk/
Your selector $('.a').children('img').children('.2020') tries to find elements with class 2020 which is inside an img element which is inside an element with class a.
Ex
<div class="a">
<img src="img/swatch/2020.jpg" >
<span class="2020"></span>
</img>
</div>
But in your case the img element has the class attribute, so you have two choices either concatenate the img and .2020 selector like .children('img.2020') or find the img elements using .children('img') and filter elements with class within that set using .filter('.2020')
If you want to retain the same structure, then you can
$('.a').children('img').filter('.2021').css("padding", "5px");
Demo: Fiddle
Your fiddle and code above both have an error, it is missing the = in your class="a"
You are saying look for all elements that have the class a. Than look for children that are images. Now look for images that have a child with the class 2021. Since images can not have children, that code would never return anything.
You can combine the two children statements with one selector instead of doing multiple actions.
$('.a').children('img.2021').css("padding", "5px");
You could also write it without the children in just one selector
$('.a > img.2021').css("padding", "5px");
The alternative is filtering.
I have several of these html blocks on a page in this structure
<div class="listing">
<h4>Some test Entry here</h4>
<div class="entry clearfix">
<a href="#" class="btn">
Text Here
</a>
</div>
</div>
I have the click event on the '.entry .btn' which is firing fine. But I want to get the inner text of the 'H4 a' within the same listing block as the btn I clicked. I have tried the following but just cannot seem to get the H4 text.
var getTitle = $(this).parents("h4").first();
alert(getTitle.html());
I have also tried closest() but still cannot get the H4? Any ideas?
closest & parents looks for ancestors. But, h4 is in another children of parent .listing.
Try:
var getTitle = $(this).closest('.listing').find("h4").first();
Firstly You need to traverse upwards in the DOM structure to identify the target element using .parent() or .parents() functions.
For your requirement you dont need the immediate parent hence .parent() is of no use instead you need to use .parents() to get all the ancestors in the DOM and refer the one with class selector .listing & finally traverse inward to find the target element h4.
JS CODE:
$('.btn').on('click',function(){
alert($(this).parents('.listing').find('h4').html());
});
Live Demo # JSFIDDLE
Happy Coding :)
use prev function in jquery
var getTitle = $(this).prev().find("h4").first();
alert(getTitle.html());
Could you please lend a hand as I am having some trouble getting the text of a heading and the source of an image element in order to create a list of the item clicked. But I will explain better with some code:
Firstly I have a div element that goes like this:
<div class="main_page_entry">
<div class="main_item_desc">
<img class="main_item_pic" src="blah.jpg" />
<h6>Item Title</h6>
<span class="icon"> <img src="icon.png" /></span><br />
<span class="address">Some address</span>
<p class="item_desc">More blahs and links for description </p>
</div>
<div class="item_controls">
...
<a href="#" class="add_to_list">
<img src="add_icon.gif" />Add to List
</a>
...
</div>
</div>
It consists with a big div containing two smaller. What I want to do is the following: When I click on 'Add to List' link, I would like to get just the text inside and the main_item_pic source in order to create a list item with those two.
So here is my written code so far:
$('a.add_to_list').live('click', function() {
var name = $(this).closest('h6').text();
var source = $(this).closest('.main_item_pic').src;
$('<li class="hide list_entry"><span class="entry_title">'+
name+'</span><button class="remove_entry"></button>'+
'<img class="list_entry" src="'+source+'" /></li>')
.appendTo('#favs_list ul')
.show('slow');
});
Obviously this doesn't work! I've tried different solutions that I read around here like:
var name = $(this).closest('h6').html();
var source = $(this).closest('.main_item_pic').attr('src');
but oh well...no luck so far. Any ideas? Thanks in advance!
Try going back to the top and coming down again along the right DOM branch:
var src = $(this).closest('.main_page_entry') // Back to the top
.find('.main_item_desc .main_item_pic') // And down again.
.attr('src');
The closest method goes up the DOM tree through your ancestors:
Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.
So it won't cross over to any of the sibling branches. Then, once you're at the appropriate ancestor, you use find to come back down, find is just like $() but uses the specified element rather than document as the root:
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
The closest method only finds the closest ancestor that matches the selector you pass it. Because the h6 and img you are looking for are not ancestors of the element you are calling it on, it won't find them. What you need is to find the closest element that contains both the element you are searching from and the elements you are trying to find, and use it as an intermediate step in the search:
var name = $(this).closest('.main_page_entry').find('h6').text();
var source = $(this).closest('.main_page_entry').find('.main_item_pic').attr('src');
First off, if this content isn't added dynamically or in a live manner (in other words, if the content is loaded with the original HTML load) then you do not have to use the .live() function.
Also, why are you using .closest()? Couldn't you just do:
<img class="main_item_pic" ref='pic1' src="blah.jpg" />
<a ref='pic1' href="#" class="add_to_list">
<img src="add_icon.gif" />Add to List
</a>
$('a.add_to_list').click(function(){
var ref = $(this).attr('ref');
var src = $("img[ref='" + ref + "']").attr('src');
var name = $('h6 a').text();
});
The method closest() looks for ancestors. Your h6 and img are not ancestors of your link.
Also, I guess you don't want $('h6').html() but $('h6 a').html()