Sorry I could not come up with a better title. I am curious to know what the better, simpler, shorter way to write below function. Specially moving the elements around.
It basically for each img creates a parent div and places the img in there. It also adds img's title attribute in another div inside above container.
$('.view-sidebar .field-item img').each(
function(){
$(this).parent().append('<div class="img-container"></div>');
$(this).appendTo($(this).parent().find('.img-container'));
$(this).parent().append('<div class="img-caption">'+$(this).attr('alt')+'</div>');
});
I think you should just use .wrap(), there wont be need to append/detach/attach in this case.
$(this).wrap('<div class="img-container"></div>');
$('.view-sidebar .field-item img').each(function () {
var div = $('<div/>', {
class: 'img-caption',
text: this.alt
});
$(this).wrap('<div class="img-container"></div>').after(div);
});
Demo
Related
$(document).on('click','#closeNewProductExpand', function() {
$('#newProductExpand').css('width', '0');
});
$(document).on('click', '#searchProduct', function() {
$('#newProductExpand').css('width', '0');
});
$(document).on('click', '#productsData', function() {
$('#newProductExpand').css('width', '0');
});
Here I want to set the width to 0 of #newProductExpand if one of the above 3 buttons is clicked.Is there any way to write this code rather than wasting such a larger space.I appreciate your help.Thanks
you can combine selectors with comma.
$(document).on('click','#closeNewProductExpand, #searchProduct, #productsData', function() {
$('#newProductExpand').css('width', '0');
});
However, as an alternative I suggest you give all these elements a common class, and use that as the selector. That way, if you need to add more elements to the set, you just give them the same class, you don't need to make the list of selectors longer every time.
You can give the elements a class and simply target the class to make it easier instead of targeting the element IDs one by one.
Like this:
$('.className').click(function(){
$('#newProductExpand').css('width', '0');
});
I understand you can use .on() to attach a single click event to an element and then specify which child elements receive the click. So, for example:
$(this.el).on("click", "span", function () {
alert("Bloop!");
});
I need to be a bit more specific and target selectors with a particular attribute, like this:
$(this.el).on("click", "span[data-placeholder]", function () {
alert("Bloop!");
});
That doesn't seem to work, though. As soon as I add the attribute it stops working. No errors, just doesn't seem to find the elements.
Is that the expected behavior? Is there a way around it?
CLARITY
$(this.el) is just a div that contains a number of elements, some of which are <span data-placeholder="First Name"></span> tags. There could be dozens of those <span> tags and I didn't want that many event listeners, so I thought I'd use .on() to add the click to the parent container.
Here's JSFiddle showing your example working, with both existing <span>s and with newly created ones.
Just to be clear, this will work with your event delegation:
var span = $('<span>Test</span>');
span.attr('data-placeholder', 'test'); // declare as an attribute
$(this.el).append(span);
span.click();
This will not:
var span = $('<span>Test</span>');
span.data('placeholder', 'test'); // declare with .data()
$(this.el).append(span);
span.click();
jQuery's .data() method will read properties from data attributes if declared, but does not store them as attributes on the element when adding data.
Here's another JSFiddle.
try
$("span[data-placeholder]", this.el).on("click", function () {
alert("Bloop!");
});
You can choose to filter your spans
$('span', this.el).filter(function() {
return $(this).hasAttr('data-placeholder');
}).on('click', function() {
//This is for all the spans having data-placeholder
//...
});
Or if the placeholder is set via data api:
$(this.el).filter(function() {
return $(this).data('placeholder') != 'undefined';
}).on('click', function() {
//This is for all the spans having data-placeholder
//...
});
This functions above select those elements specifically, if event delegation on the OP is needed, then you can do the following:
$('span', this.el).on('click', 'span', function() {
if($(this).data('placeholder') != 'undefined') {
alert('bloop');
}
});
add a id to your span and pin point it using # tag
I have a sprite image than when mouseenter/mouseleave occurs over it, the background position changes.This is working so far although there is probably a more efficient way of doing it. However I have several images I need to do this with and am trying to find a way to feed the id of the image into the jQuery rather than duplicate code.
The HTML:
<div class='featSmallBox' id='featSmallImg2'>
</div>
The image source is placed using CSS.
This is what I have so far for the jQuery.
$("#featSmallImg2").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("#featSmallImg2").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Ideally I need to feed in the id of what is being mouseentered dynamically, but everything I've tried doesn't seem to work.
Apologies if this makes little to no sense. I'm new to both jQuery and this site.
If the jQuery code is the same for all divs containing the sprites, try changing $("#featSmallImg2") in your jQuery to $(".featSmallBox"). This way, all your divs with the class .featSmallBox will have this feature.
Check with event.target
$( "body" ).mouseenter(function( event ) {
console.log( "mouseentered id: " + event.target.id);
});
$("div[id^='featSmallImg']").mouseenter(function(){
$(this).animate({
backgroundPositionX:"100%"
});
});
$("div[id^='featSmallImg']").mouseleave(function(){
$(this).animate({
backgroundPositionX:"0%"
});
});
Try this code. Event will be called for all div's whose id starts with 'featSmallImg'
I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/
I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example
I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().
You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});
LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);
I'm having problems manipulating an element's class attribute because I've added it to the DOM using .wrap(). It simply wont change the attribute at all, even though everything seems to be in order.
If I use something else than .wrap() or .wrapInner() everything works as expected. If I change .toggleClass() to an if/else if still wont work.
One could of course work around it but I'd rather find the root of the problem and learn something along the way.
Here's the code in question:
$('.tour-category').each(function () {
var tour_list = $(this);
var header = tour_list.parent().find('h4');
var link = $('<a>', {
href: '#',
'class': 'tour-category-toggler',
click: function (e) {
e.preventDefault();
tour_list.slideToggle(200);
link.toggleClass('close');
}
});
tour_list.hide();
header.wrap(link);
});
Maybe there's something I'm missing, or is this perhaps a bug in jQuery?
try to change
link.toggleClass('close');
into
$(this).toggleClass('close');