I'm trying to use jQuery (3.1.1) to wrap elements of a given class and then prepend a new div as the first element inside the wrapper. I've tried a number of things and this is as close as I can get.
testWrap = function() {
var testWrapImpl = function(index, value) {
var div = $("<div></div>");
$(value).wrap(div);
$(div).prepend("<div class='child-div'>some text</div>");
alert("done");
};
$(".myClass").each(testWrapImpl);
This code successfully wraps each element with the outer div but doesn't seem to do anything with the "some text" div.
The alert does show up for each of the elements in the page and the page seems to load with out error.
What am I doing wrong?
You can .prepend() before using .wrap() to achieve what you're after.
Also, once you've defined div variable as a jQuery object, you should reference div variable rather than $(div).
var testWrapImpl = function(index, value) {
$(value).wrap( '<div></div>' ).parent().prepend("<div class='child-div'>some text</div>");
alert("done");
};
$(".myClass").each(testWrapImpl);
https://jsfiddle.net/2966pxqz/4/
The .wrap() method wraps a copy of the wrapper around each target element. Thus once you've called .wrap(), your div thing is a perfectly OK element but it's not the actual wrapper.
What you could do is add a class to the wrapper, do the wrapping, then find the wrappers and add the extra element:
$(".myClass")
.wrap("<div class='wrapper'></div>")
.closest(".wrapper")
.prepend("<div class='child-div'>some text</div>");
There's no real need to do your own .each() iteration; the jQuery routines will do that implicitly. If you need to make decisions about the wrapper for each element in "myClass", you can pass a function to .wrap(). The function will be called for each individual element with a single argument containing the index into the list, and with this bound to the element for that iteration. Your code in the function can inspect the element or do whatever, and the return value from the function will be used as the wrapper. So for example to give a numbered class to each wrapper:
$(".myClass")
.wrap(function(index) {
return "<div class='wrapper wrapper-" + index + "'></div>";
})
.closest(".wrapper")
.prepend("<div class='child-div'>some text</div>");
Related
I want to use jQuery to manipulate a cloned element that is not on the DOM, to perform actions like .remove() on it. Say I have the following code:
var div= $('<div> <div id="div1"></div> </div>');
div.remove('#div1');
console.log(div.html());
The result on the console will still show that the element was not removed. string manipulation is not desirable, I'm looking for something analogue to $().remove()
The div variable will contain a reference to the outer div. You need to use find() to get the inner div by its id:
var $div = $('<div><div id="div1"></div></div>');
$div.find('#div1').remove();
Using the context argument of the jQuery() function:
$('div', div).remove('#div1');
I've bene bursting my head for the last few hours. Here's the situation:
I have a website that has many divs, but many of them share classes (they are equal) but have some different texts. Example:
<div class="summary-title">
I Am That Girl</div>
<div class="summary-title">
I Am That Girl</div>
What I want to do is select each one of these divs and add a span whenever another div is hovered.
I mean, this is what I want to do: hover a div that's before the sumary-title div, a span with a class is appended inside the sumary-title div or out of it, whatever works.
That's what I got so far:
$('summary-title').each(function(index) {
var content = $(index).next().text();
$(index).append("<span class='hover-text'>"+content+"</span>");
});
But I get an error that $ is not defined, probably because it is a closure?
I have no idea what to do. The code seems horrible too — i need to do this quickly and I just can't do. Would anyone help me at least know what to do?
Thanks
append() is already an implicit iteration ( that loops through the set of elements in the jQuery collection.) and it's unnecessary to call .each() .
$('.summary-title').append(function() {
return "<span class='hover-text'>" + $('a', this).text() + "</span>";
});
Outside of making sure you have jQuery on your page and properly referring it, your code should go like:
$('.summary-title').each(function() {
var content = $(this).children('a:first').text();
$(this).append("<span class='hover-text'>"+content+"</span>");
});
Notice:
dot in class selector - $('.summary-title')
this instead of index - $(this)
children selector instead of next
Check demo - Fiddle.
To append this to a preceding element on hover use:
$(document).ready( function() {
$('.summary-title').hover( function() {
var content = $(this).children('a:first').text();
$(this).prev().append("<span class='hover-text'>"+content+"</span>");
});
});
I am running an ajax call that returns some HTML as a string. For the purpose of this question I will call this <div class='abc'>ABC123</div> when I get this back I want to check and see if the class "abc" has a value and what that value is. However when I run a .find() I cannot find the class, I can find the div, but not the specific class. Just using the div is not adequate because in the real live code the HTML is very complex and has many divs and classes. Below is some JS that illustrates my point.
var x = "<div class='abc'></div>";
$(x).hasClass("abc"); // returns true
$(x).find(".abc"); // Returns empty array
Why is it that the first line returns true, but the selector cannot find the element?
Thanks!
Because $x is the div with class abc.
jquery .find() tries to find any children within the div.abc with class abc which it won't find.
This is more like it.
var x = "<div class='abc'><div class='def'></div></div>";
$(x).hasClass("abc"); // returns true
$(x).find(".def"); // returns $('div.def')
When we append html element to the page, sometimes JQuery can't find this element due to parent and child relationship.
For example: a button having class submit inside a div having id append_area and we want to run a function on click on this button. Then we can use the below code.
HTML Code:
<div id="append_area">
</div>
Jquery Code:
$("#results").delegate('.submit', 'click', function(){ });
I am trying to add a class to a newly appended DIV without using something like:
t.y.append('<div class="lol'+i+'"></div>');
Here's a better example of what I'm trying to do:
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
t.y.append('<div></div>').addClass('lol'+i);
});
Page load HTML looks like:
<div class=".slideButton0 .slideButton1 .slideButton2" id="sliderNav">
<div></div>
<div></div>
<div></div>
</div>
When you append an element through .append, it doesn't change the context of the jQuery object.
You could write it like this:
$('<div></div>').appendTo(t.y).addClass('lol'+i);
or
$('<div></div>').addClass('lol'+i).appendTo(t.y);
(these both do the same thing, simply in different orders, the second possibly being more clear)
the context of the jQuery object will be the newly created div.
t.y.append('<div></div>').addClass('lol'+i);
should be
t.y.append('<div></div>').find('div').addClass('lol'+i);
In the first case you are adding class to the div to which you are appending ..
SO the context is still the parent div and not the newly appended div..
You need to find it first inside the parent and then add the class..
EDIT
If you want to just add the class to the last appended element ... Find the last div in the parent and then add the class to it..
This will make sure you are not adding the class to all the div's every single time you iterate in the loop..
t.y.append('<div></div>').find('div:last').addClass('lol'+i);
Try this:
t.y.append($('<div></div>').addClass('lol'+i));
Fiddle: http://jsfiddle.net/gromer/QkTdq/
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
var d = $('<div />').addClass('lol' + i);
t.y.append(d);
});
The problem is that append returns the container instead of the thing you just appended to it. I would just do the addClass before the append instead of after:
var t = this;
$(this.x).each(function(i, obj) {
//append new div and add class too <div></div>
t.y.append($('<div></div>').addClass('lol'+i));
});
EDIT ... or, in other words, exactly what Gromer said. Beat me by five whole minutes, too. I'm getting slow.
You don't mention why you want to number the class attribute to your list items, but in the case that you are actually using them for css don't forget you have :odd and :even css selector attritbutes and also the equivalent odd/even jQuery selectors.
http://www.w3.org/Style/Examples/007/evenodd.en.html
http://api.jquery.com/odd-selector/
I didn't find anything like this. notice the class attribute!
$.each(obj, function (_index, item) {
resultContainer.append($('<li>', {
class: "list-group-item",
value: item.id,
text: item.permitHolderName || item.permitHolderId
}));
});
I am building a block of nested divs around a specific element on the client. I am using jQuery's .wrap() initially to get the first part of the block which is working fine. But now I want to attach the ending block after the element I am wrapping and I am finding I can't attach it to anything because it is all being created at the same time. I tried using insertAfter() but I don't want it to be a sibling of the element I am wrapping, I want it to come after it's parent.
Here is my code:
$(document).ready(function() {
buildShadows('#section');
});
function buildShadows(element){
$(element).wrap("<div class='section_shadow_wrapper'><div class='section_shadow_curve'><div class='section_shadow_outer'><div class='section_shadow_inner_left'><div class='section_shadow_inner_right'>");
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertAfter(element);
}
What I am trying to do is append the first element of the second part (section_shadow_bottom_left) as a sibling of 'section_shadow_inner_right' but after 'element'
Any help would be appreciated.
Thanks.
You should be able to just traverse up to the new parent you just created.
Have you tried this?
function buildShadows(element){
$(element).wrap('<div class="section_shadow_wrapper clearfix"><div class="section_shadow_curve"><div class="section_shadow_outer"><div class="section_shadow_inner_left"><div class="section_shadow_inner_right">')
.parent().after('<div class="section_shadow_bottom_left"><div class="section_test_bottom_right">');
}
Try traversing to the next sibling of the original element and using .insertBefore() on it.
var nextsibling = $(element).next();
//Wrap code
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertBefore(nextsibling);