I'm trying to copy the contents of a DIV and insert a heading before the copy. However, the heading gets inserted at the wrong point.
var reference = $('#reference').clone().contents();
reference.prepend('<h1>Heading</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reference">
<ul>
<li></li>
</ul>
</div>
I want the heading to go before the <ul> but instead it gets inserted after before the first li.
So it looks like this:
<div id="copy">
<ul>
<h1>Heading</h1>
<li></li>
</ul>
</div>
Instead of this (what I want):
<div id="copy">
<h1>Heading</h1>
<ul>
<li></li>
</ul>
</div>
This is probably a really basic question but a few hours of trying prependTo(), before(), insertBefore() and searching online have not gotten me any closer. Thanks :)
Firstly remove contents() as you want to clone the whole element, not its children. Secondly, create the h1 tag, then use prependTo() to place it at the desired location in the cloned element.
Also note that your current code results in duplicate id attributes in the DOM, which is invalid. I'd suggest making the #reference id in to a class instead. Try this:
var reference = $('.reference:first').clone();
$('<h1>Heading</h1>').prependTo(reference);
$('body').append(reference);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reference">
<ul>
<li>Foo</li>
</ul>
</div>
Use it like this I have tried and It is working fine.
$('#reference').clone().contents().parent().prepend('<h1>Heading</h1>')
Related
I have a list which is structured something like this:
<ul data-Id="2" class="listElement">
<li></li>
<li></li>
<li>
<ul data-Id="3" class="listElement" style="display: none">
<li></li>
<li>
<ul data-Id="4" class="listElement" style="display: none">
<li></li>
</ul>
</li>
</ul>
</li>
I need to be able target the ul element which is currently hidden, and do a slidetoggle() on it. This I have tried to do in jQuery, but it doesn't work so well:
var test = 3; //i need to declare it as a var, because i get this from another item
$('.listElement').find('[data-Id="' + test + '"]').slideToggle("fast");
Nothing really happens and I can't seem to find what I'm missing here
Your code is correct, but please make sure dom elements has been already placed(ready) when your javascript code is run.
Or your javascript should be run on ready event of document hired.
$(document).ready(function(){
var test = 3; //i need to declare it as a var, because i get this from another item
$('.listElement').find('[data-Id="' + test + '"]').slideToggle("slow");
});
Is there a way to place an html element just before my body end tag, without knowing which tags are before it? In this scenario i don't know that there is a ul list at the end.
Note: I can't use jquery to solve this.
e.g.
<body>
<p id="test">Hello</p>
<script>
document.getElementById("test").MOVE_BEFORE_BODY(); //<-- something like this
</script>
<ul>
<li>...</li>
<li>some random stuff</li>
</ul>
<!-- element should be moved to this position -->
</body>
someElement.appendChild will move an element to the end of someElement.
document.body.appendChild(
document.getElementById("test")
);
Use document.body.appendChild(yourElement)
I am trying to get sortable to work.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
</li>
</ul>
I can't seem to grab and drag anything. The important part of this question is the 3 div's in the li
I admit, I don't understand what this line in the docs means: "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)."
And I am able to get it to work with a table.
Any insights?
Yes, the docs do say "ui-sortable element should only contain one ng-repeat and not any other elements (above or below)." which makes it hard to have 3 divs in the li. However, there is a solution.
You can use tg-dynamic-directive (at https://github.com/thgreasi/tg-dynamic-directive) to solve this. Don't forget to include it, and put 'tg.dynamicDirective' in your dependencies. Basically you take out the middle part in between the li tags, in this case the 3 divs, and you put it in another file and link to it.
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
</li>
</ul>
Then in another file put the innards, like innards.html:
<div> {{c.field1}} </div>
<div> {{c.field2}} </div>
<div> {{c.field3}} </div>
And replace the innards with:
<ul ui-sortable='data.sortableOptions' ng-model="dp.claims" class="list-unstyled">
<li ng-repeat="c in dp.claims">
<tg-dynamic-directive ng-model="c" tg-dynamic-directive-view="getView">
</tg-dynamic-directive>
</li>
</ul>
And in your controller put something like:
$scope.getView = function(item) {
if item {
return 'innards.html';
return null;
};
Anyways the docs go over it pretty well. I realize this question is pretty old but I just ran into this myself and got it working so hopefully it helps someone else.
I need to wrap the elements inside of the body by <div id="wrap"> dynamically, using jQuery/JavaScript. The final result has to be:
<body>
<div id="wrap">
<!-- open div #wrap here -->
<div id="nav">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
<div id="main">....</div>
</div>
<!-- close div #wrap here, before close body tag -->
</body>
Should I create the div and after add the content that already exists inside body? How can I do it?
Thank you!
First you would want to grab the current HTML and store it in a variable, then the use of the .html()method will do wonders:
$(function(){
var bod = $("body"), current_html = bod.html();
bod.html("<div id=\"wrap\">" + current_html + "</div>");
});
Use .wrapAll() method, as below:
$('body').children().wrapAll("<div id='wrap'>");
JSBin Demo
$(document.body).html("<div id='wrap'>...</div>")
wrapAll should produce several div tags. I would have used wrapInner instead.
$('body').wrapInner('<div id="wrap">');
I've got a code you see below:
<div class="categories-list">
Description One
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
What I want to do is to select the text "Description one" which has no tag around it and wrap it with the tag (specifically h2) using jQuery, so the final code would look like:
<div class="categories-list">
<h2>Description One</h2>
<ul>
<li>
<span>CATEGORY1</span>
<span>CATEGORY2</span>
<span>CATEGORY3</span>
</li>
</ul>
</div>
I know that I can use wrap() function to get the second thing done. The selecting part is the one I've got the problem with.
Simple wrap can't do the job until you walk over the contents of the element:
$(".categories-list").contents().first().wrap("<h2 />");
DEMO: http://jsfiddle.net/MDhvY/