This question already has answers here:
Replace method doesn't work
(4 answers)
Closed 8 years ago.
running into a little issue, can't quite figure it out. I'm using jQuery on a page to handle some image loading and lightboxing. Part of the feature set requires replacing a portion of an anchor tags href to direct it towards a different resource.
there are a variable amount of images in the set, so I'm using jQuery's .each() method to grab them, replace part of the url, then fade them in one after the order. The fading works correctly, but JavaScript's .replace() isn't taking effect (though if i turn them into a variable and log it i see the correct results) and if i chain the fade in function to the back of .replace it doesn't get executed.
feels like the value isn't being returned to the elements. what am i missing?
thanks for your help!
HTML:
<a class="test" href="aresourcewithextension_b.jpg">
<img src="aresourcewithextension_a.jpg" />
</a>
JavaScript:
$('.test').each(function(i){
$(this).attr('href').replace('_b.jpg','_c.jpg').delay(100*i).animate({opacity:1},200);
});
You need to set the replaced href. .replace itself won't update the original string.
Try like below,
this.href = this.href.replace('_b.jpg','_c.jpg');
You have to remember that strings are immutable, even in JavaScript. Try this:
$(".test").each(function(i){
$(this).attr("href", $(this).attr("href").replace("_b.jpg", "_c.jpg"));
$(this).delay(100 * i).animate({opacity:1}, 200);
});
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 7 days ago.
I'm trying to get an element which is added by an external application. The only way I can get this specific element is by the data-i18n-key attribute which I thought I can grab like any data attribute so something like this.
The code:
const buttons = document.querySelectorAll('[data-i18n-key="sdk.seamless_product_reward.paid_items_required"]');
console.log(buttons.length);
<span class="lion-reward-item__redeem-button-text lion-loyalty-page-reward-item__redeem-button-text" data-i18n-key="sdk.seamless_product_reward.paid_items_required">Paid items required</span>
However, this doesn't return anything. Any ideas how to do this?
Of course, Barmer is absolutely right. Your code works. The problem will be that your JS is initialised before the DOM has finished loading. Pack your JS above the closing body tag.
This question already has answers here:
How to append/prepend/create a text node with jQuery
(3 answers)
Closed 6 years ago.
I'm creating a JavaScript framework to build HTML documents. First a virtual document is built using jQuery. Right now, I'm experimenting with jQuery's "add" function like so:
$(target).append($("").add($("<div>")).add($("<span>")))
The framework concatenates these calls to build the virtual document before it is appended to the target - this simplified code sample isn't literally what I'm doing. The reason for adding the first $("") is because the framework starts by creating an empty jQuery selection then adds stuff to it. Sub-documents are recursively created and added to parent elements.
This works fine for concatenating elements together, but what if I want to concatenate text? Let's say I want to have something like this rendered:
<div></div> Outside the box!
I can't just do $("<div>").add("Outside the box!") Also, $.after() doesn't seem to work unless the <div> is already on the DOM.
Is this functionality supported by jQuery? If not, are there any workarounds?
Yes, you can use simple string concatenation with current HTML of element: $('<div>').html($('<div>').html() + 'Outside the box!')
Since your code DOM is in memory and not actual HTML, you need to use multi-line code:
var $div = $('<div>', {html: $('<div>')});
$div.html($div.html() + "Outside the box!");
This question already has answers here:
Can't select div with id=":1"
(2 answers)
Closed 7 years ago.
I have an element that has a period in it:
<div id="parent">
<div id="my.element"></div>
</div>
and I want to select it using Prototype. I've tried this:
$$('#parent #my.element');
but it isn't working because it thinks the .element part is a class. Is there a way around this?
FYI, it isn't really an option to rename the element. Unfortunately I'm stuck with this naming scheme as well as only Prototype
Thanks
You can always escape your dot in css, so this should work
$$('#parent #my\\.element');
EDIT: As stated by Oriol and tested, you indeed have to use 2 slashes
This question already has answers here:
How to append one jQuery element already in the DOM to another element?
(5 answers)
Closed 3 months ago.
I am writing a Greasemonkey userscript, with jQuery. The segment of code affects forum thread pages, and intends to append a button to the footer of every post.
Assume the button is already a jQuery element $button, this is the code I have:
$('table.posts').each(function() {
//get the name of the poster
profileName = $(this).find('.user').text();
//change the link relative to each poster
$button.attr('href', '/search?user=' + profileName);
//This is the problematic line:
$(this).find('div.postFooter').append($button);
});
I have tested the value of profileName using an alert, and it successfully iterates through and alerts the profile names, but it only appends the button to the last post's footer (with the correct link).
I've tried using a variety of different selectors and ways to traverse the DOM to the required element, but all methods have resulted in the same thing. I'm out of ideas.
Use clone:
$(this).find('div.postFooter').append($button.clone(true));
Everytime you are changing and appending the same $button element.
This question already has answers here:
jQuery : remove element except inside element
(4 answers)
Closed 8 years ago.
There is a great method in jquery called wrap() that will wrap a selected element inside a new element, like so:
Start with:
<p>I wish I was wrapped!</p>
Add code:
$("p").wrap("<div></div>");
End with:
<div><p>I wish I was wrapped!</p></div>
But what I need is something that will unwrap, so that the above process is reversed. It seems that the issue is that when you select a bad item (let's say an unnecessary table) that it always grabs what is inside it as well, so if I want to remove all <td>s, I am left with nothing, since that removed the td and anything inside.
Is there a standard reliable way of removing elements but leaving any children/ancestors alone?
In JQuery 1.4 unwrap() was added:
http://api.jquery.com/unwrap/
A quick Google search reveals that there is such functionality, in the form of a small 576 byte plugin called jqueryunwrap. I have not tried it personally, but it is worth a shot. ;)
$("p").unwrap() will unwrap the wrapping div....................I hope this helps