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
Related
This question already has answers here:
jQuery: Check if div with certain class name exists
(19 answers)
Closed 7 days ago.
I have some code that creates a new paragraph element within a div and gives it the class "taskparagraph". I want to check if any elements with this class exist, and if not, add another (unrelated) paragraph.
I genuinely have no clue how to do something like this even though it seems like such a simple task. Maybe I'm just not Googling the right things...
P.S. I do not plan on using any JS libraries like jQuery for now. If using something like that is the only possible way to do this task please let me know.
You can use document.querySelector:
if (!document.querySelector('.taskparagraph')) { // or compare with null
// no element with class "taskparagraph" exists
}
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:
jQuery OR Selector?
(6 answers)
Closed 9 years ago.
I am working on an ASP.NET page in which I generate some JavaScript code based on values in a database.
For example, in the database there might be the formula sum([#itemA]), which would evaluate to something like $('#itemA').change(function(){ sum(this); });.
I know that I can select elements using jQuery selectors such as $('[id*=itemA]') or $('[class*=itemA]'), but I am wondering if there is any way to combine these selectors so that any element with either a class or an ID of itemA would be selected.
Right now in my code I am just using if/else blocks to deal with ID's or classes, but if there is an easier implementation, I would love to use it.
I looked at the jQuery documentation and googled around a bit, but I didn't see anything that answered my question.
Thanks in advance!
This should do the trick
$('[id*=itemA], [class*=itemA]')
For more details, take a look to official jquery documentation
Use multiple selectors like
$('.class1, .class2....., .classn')
You can literally use anything like ID names, class names or selectors like you specified separated by commas
Like in css, when selectors are separated by ,they are cumulated :
var elements = $('[id*=itemA], [class*=itemA]')
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:
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);
});