I cloned a html element.
var $clone = $('.rules-if-field-container-'+if_counter).clone(true);
But now I want to append a div when the div is cloned.
I tried this:
$clone.append('<div class="append_or_'+inc_counter+'"> </div>').insertAfter('rules-if-field-container-'+inc_counter);
But doesn't give me the correct result.
It gives me this result:
<div class="box box-warning box-solid rules-if-field-container-1"><div class="append_or_1"> </div></div>
But it must be like this:
<div class="box box-warning box-solid rules-if-field-container-1"></div>
<div class="append_or_1"> </div>
How can I perform a insertAfter when I cloned an element?
In that case append() is not suitable for your needs, as it creates the content you specify as a child element of the target.
Instead you can first add the clone to the DOM, then use after() to add the second div. Try this:
$clone
.insertAfter('.rules-if-field-container-' + inc_counter)
.after('<div class="append_or_' + inc_counter + '"> </div>');
Also note that I would strongly suggest you don't use incremental class names. They quickly become a pain to maintain, and go completely against the point of classes, which is to allow grouping of related elements.
From jQuery docs.
The .append() method inserts the specified content as the last child
of each element in the jQuery collection (To insert it as the first
child, use .prepend()).
I think you need after instead.
Insert content, specified by the parameter, after each element in the set of matched elements.
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.
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
I would like to add another div within a div group on a button click in order to have a continuously generating slider. Like so:
<div class="carousel-items">
<div class="date-carousel-other slider"></div>
<div class="date-carousel-other slider"></div>
<div class="date-carousel-other slider"></div><!-- new div -->
</div>
Currently my java script is:
$('.slick-next').click(function(){
$('"<div class="date-carousel-other slider"></div>"').append( ".carousel-items" );
});
The result is appending the boxes underneath my slider (big div) instead of inside the slider. Appending to ".slider" instead, duplicates all the div's and wedges boxes inside the slider.
Is my syntax off or am I using the wrong method?
As per Docs,
The .append() and .appendTo() methods perform the same task. The major difference is in the syntax-specifically, in the placement of the content and target. With .append(), the selector expression preceding the method is the container into which the content is inserted. With .appendTo(), on the other hand, the content precedes the method, either as a selector expression or as markup created on the fly, and it is inserted into the target container.
So your solution failed because .append() expects the target as selector and content as argument in method .append(). Like this,
$('.slick-next').click(function(){
$(".carousel-items").append('<div class="date-carousel-other slider"></div>' );
});
if you want to keep the target and content in same way,use .appendTo() instead of .append():
$('.slick-next').click(function(){
$('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );
});
Try with append()
$('.carousel-items').append("<div class='date-carousel-other slider'></div>");
or using .appendTo()
$('<div class="date-carousel-other slider"></div>').appendTo( ".carousel-items" );
You swapped it -
$(".carousel-items").append( "<div class='date-carousel-other slider'></div>" );
Or use appendTo -
$("<div class='date-carousel-other slider'></div>").appendTo( ".carousel-items" );
You have swapped the positions of "Selector" and "Content". You must use append() like below :
$('.slick-next').click(function(){
$(".carousel-items").append( '"<div class="date-carousel-other slider"></div>"' );
});
The append() method inserts specified content at the end of the selected elements.
Syntax:
$(selector).append(content,function(index,html))
You need to use appendTo() instead of append(), also remove unnecessary quotes ""
$('<div class="date-carousel-other slider"></div>').appendTo(".carousel-items" );
I have three divs. How should I append a div onto an unknown div?
<div class="main" >
<div id="drag-box" >
<div id="" class=""> </div>
</div>
</div>
I want to append div on an unknown div which is come after drag-box div. I don't know which div comes after drag-box div. But there must be one div after drag-box div.
$("#drag-box div:first-child").append("<span />");
or
$("#drag-box div").first().prepend("<span>first</span>");
For a complete answers, here it is working:
http://jsfiddle.net/dMUD3/
try this
$("#drag-box div:first-child").attr("id");
Instead of giving you a one liner I would like to give you an indepth solution.
A browser takes your html and parses what is called a DOM Tree out of it.
so if your html is .
<div class="a">
<div class="foo"></div>
<button class="foogle"></button>
</div>
The tree structure will become something like
`-div.a
|-div.foo
`Button.foogle
You should actually look into DOM Api's at MDN
How DOM helps ?
With DOM api's you can actually access the unknown div using the reference to a known div. So if you actually understand your markup and its representation in DOM it should be pretty simple to get reference to nth child of an element;
You can access the child elements by the children attribute.
So
// Get reference to the element.
var parent = document.getElementById("drag-box");
// Use the dom.
var child_i_want = parent.children[0];
// or there is another way
var child_i_reallyWant = parent.firstElementChild;
There are solutions with jQuery but I feel its important for you to Understand basics of DOM even when there are helpful abstraction libraries in existance.
You'll need the + selector. It applies to the object directly following. See here.
.drag-box + div {
}
$('<div></div>').appendTo($('#drag-box div:first'))
I would like to convert
<div id="outer">
<div id="inner"></div>
</div>
into
<div id="outer">
<div id="middle">
<div id="inner"></div>
</div>
</div>
I would like to preserve any references to the divs that may have been set prior to this so just doing $("#outer").html($("" + $("#outer").html() + "")) will not work for me. Is there a better way than just creating the middle div, moving all the children of outer to it and then appending it to the outer div?
Use .wrap()...
$('#inner').wrap('<div id="middle"></div>');
DEMO: http://jsfiddle.net/ENmDF/
You should note that although jQuery makes it look like you're working with HTML since it accepts a string like '<div id="middle"></div>' to create an element, the truth is that it takes your string, uses it to create DOM elements, then inserts it into the DOM, placing it, and the wrapped part, in their respective places.
It would be similar to this in the DOM API...
var inner = document.getElementById('inner');
var middle = document.createElement('div');
middle.id = 'middle';
inner.parentNode.insertBefore(middle, inner);
middle.appendChild(inner);
DEMO: http://jsfiddle.net/ENmDF/1/
jQuery has another syntax for creating elements with attributes. That is to pass an object as the second argument to the $ function, so the original code could be written like this...
$('#inner').wrap($('<div>', {id:"middle"}));
DEMO: http://jsfiddle.net/ENmDF/3/
$("#inner")
.wrap(
$("<div>")
.prop("id", "middle")
);
Works the same way as am not i am's answer, but this one uses the DOM to create the div element that wraps it.
Note the lack of a semicolon (;) after setting the id attribute.
Demo.
Also, in case you prefer it, here's a one-liner:
$("#inner").wrap($("<div>").attr("id","middle"));