Add a div arround a while loop - javascript

I have this script.
var $bigList = $('.list-products'), group;
while((group = $bigList.find('li:gt(3):lt(4)').remove()).length) {
$('<ul class="list-products"/>').append(group).appendTo('.box-products');
}
But i want a div around every .
$('<div class="container"><ul class="list-products"/>').append(group).appendTo('.box-products');
But that is not working. What do i wrong?

It looks like you are creating a div, but not actually adding the <ul> tag as a child, try something like:
$('<div class="container"></div>').append($('<ul class="list-products"/>').append(group)).appendTo('.box-products');
or if that still doesn't solve your problem, you may want to split the statement.
var $div = $("<div></div>");
$div.append($('<ul class="list-products"/>').append(group)).appendTo('.box-products');
I don't have time to make a fiddle, but I can if neither of these solutions work.

Related

cannot display comment list using jquery

Just want to display comment list in the following way but something is wrong with my code and I cannot get expected result. Could you please check it and help me to find the mistake.
I get following result:
var item = $('<div>');
$.each(data.results, function(i, res) {
var photo = $('<div>'),
block1 = $('<div style="float: left;">'),
block2 = $('<div>'),
title = $('<h4>'),
info = $('<p>');
photo.html('<img src="xyz">');
title.html('<hr/>'+res.name+','+res.country);
info.html(res.comment_text);
block1.append(photo);
block2.append(title, info);
item.append(block1, block2);
});
$("#comments").html(item);
This seems to be a clearing issue. You need to clear the parent divs. You can easily do so by adding a clear class to those items and applying the following CSS:
.clear:after {
content: "";
display: table;
clear: both;
}
Here is a test case.
It would have been better if you supplied the output HTML and preferably a fiddle to play with. Now you forced us to figure it out all by ourselves. Make your questions as clear and to the point as possible, so people will answer to you more quickly and thoroughly.
First off your selectors are bad, you have 3 vars that are calling the same thing. Use this as a guideline for your selectors. jQuery Selectors Also it will be helpful to know what is failing exactly, maybe paste some HTML so we can better help you.
Edit: Try removing the block1 and block2 vars and see how it looks. With those selectors they are appending the photo and title info to the very first div. Try using the selector $(this) instead of block1 and block2.
Edit2: Ok so what is going on is your item.append(block1, block2); part is adding the blocks you create to the first div.
EDIT3: You need to create a new div and add the new blocks to create the new "item" Something along the lines of item.append("< /div>< div>"+ photo + title + info+'< /div>')
Edit 4: Without knowing your html I can't really write any code for your situation I can only assume and guess.
You should use stylesheets over inline styles, but essentially you just need to clear the float you're creating.
Change:
var item = $('<div>');
to:
var item = $('<div style="clear:left">'),
where are you closing your elements? try with this code:
var item = $('<div/>');
$.each(data.results, function(i, res) {
var photo = $('<div/>'),
block1 = $('<div style="float: left;"></div>'),
block2 = $('<div/>'),
title = $('<h4/>'),
info = $('<p/>');
photo.html('<img src="xyz"/>');
title.html('<hr/>'+res.name+','+res.country);
info.html(res.comment_text);
block1.append(photo);
block2.append(title, info);
item.append(block1, block2);
});
$("#comments").html(item);

jquery detach() inside custom click event

I have a fairly complex situation (to me at least):
I have a click function that was used to show an overlay. Inside the click function, the element in question is determined dynamically:
$('a.overlay-show').click(function() {
var id = $(this).attr('id');
var el_id = '#project-details-overlay-' + id;
Now what I'd like to do is something like:
$(el_id).detach();
But I am seeing that this doesn't work because I am passing in an element not a selector. So how would one do this?
What I need to do is grab that element and re-attach it somewhere else. I have tried to just deal with the element's contents using .html() and so forth but because the content, at times contains javascript elements such as slideshows, this doesn't seem to work out too well...
Any suggestions?
should work this way:
$('a.overlay-show').click(function() {
var id = $(this).attr('id');
var el_id = $('#project-details-overlay-' + id);
el_id.detach();
});
i'm not familiar with detach.. if you're trying to move it somewhere else:
<div id="somewhereElse"></div>
then you would write:
el_id.appendTo('#somewhereElse');
if you want to keep it where it is AND copy it somewhere else:
el_id.clone().appendTo('#somewhereElse');
lastly, if you're not using el_id anywhere else beyond this one line of code, you don't even need the extra variable... just condense the var statement and the append statement into one:
$('#project-details-overlay-' + id).appendTo('#somewhereElse');
Thanks #erikruina - appendTo() works much better. I ended up fixing it with
$('a.overlay-show').click(function() {
var id = $(this).attr('id');
var el_id = $('#project-details-overlay-' + id);
$(el_id).appendTo('#selected-project');
});
I suspect that the issue is that with detach(); you also need to deal with all the child elements, whereas appendTo() just works.

Stopping never ending append. jQuery

I tried to set it up so that it checks to see if it has another variable, and if it doesn't, add it.
var item = "<li>Testing</li>";
var hasItem = $(".target-class").has(item).length;
if(hasItem == 0) {$(".target-class").append(item)}
This doesn't work and it keeps appending item forever.
.has expects a selector, not HTML:
var item = '<li class="testing">Testing</li>';
var hasItem = $(".target-class").has('li.testing').length;
Please read the documentation.
So if your HTML were:
<div class="target-class"></div>
Then the below while loop would add the div element once and then stop executing:
var item = "<li class='testing'>Testing</li>";
var targetEl = $(".target-class");
while (!targetEl.has("li.testing").length) {targetEl.append(item);}
http://jsfiddle.net/cssimsek/qdpFJ/
I actually had
var hasItem = $(".target-class").has(item).length;
messed up. It wasn't selecting what I thought it was selecting. As a tip for anyone new to jQuery, add .remove() to the end of your selector. When you are removing exactly what you want to select then you know you have it right. Just remove .remove() and you are good to go.
Along with fixing .has(item), it now works.

How to swap two div tags?

I want to swap two html div tags entirely, tags and all. I tried the code below code but it does not work.
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id.next().next());
How to swap two div tags entirely.
You have some bracket mismatching in your code, it looks like you might be trying to do this:
jQuery('#AllBlock-'+Id).insertAfter($('#AllBlock-'+Id').next().next());
Which would take something like:
<div id="AllBlock-5"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
And, if called with Id 5, turn it into this:
<div id="AllBlock-6"></div>
<div id="AllBlock-7"></div>
<div id="AllBlock-5"></div>
This is because you're taking block 5, and moving it (using insertAfter) to the place after the block that's next().next() (or next-but-one) from itself, which would be block 7.
If you want to always swap #AllBlock-Id with #AllBlock-[Id+2], so they switch places and end up like the following:
<div id="AllBlock-7"></div>
<div id="AllBlock-6"></div>
<div id="AllBlock-5"></div>
You might want to try:
var $block = jQuery('#AllBlock-'+Id);
var $pivot = $block.next();
var $blockToSwap = $pivot.next();
$blockToSwap.insertBefore($pivot);
$block.insertAfter($pivot);
You can't do this because you can't concatenate a string and a jQuery object.
Try this:
var div = $('#AllBlock-'+Id);
div.insertAfter(div.next().next());
it should be like this
you should close the bracket after Id,
jQuery('#AllBlock-'+Id).insertAfter('#AllBlock-'+Id).next().next());
You'll need to detach the existing dom object first, then re-use it later:
$('#divid').detach().insertAfter('#someotherdivid');
What I understand is you want to swap a div when clicked with the last div. What will you do if it is the last div? move it to the top?
This solution should solve the problem, furthermore, you can modify this regex to match the format of your ID. This can probably be made more concise and robust. For example, you could get the last ID a bit more sophisticatedly. This may just be modifying the selector or something more. I mean, you do not want to go rearranging the footer or something just because its the last div on the page.
$('div').click(function() {
//set regex
var re = /(^\w+-)(\d+)$/i;
//get attr broken into parts
var str = $(this).attr('id').match(re)[1],
id = $(this).attr('id').match(re)[2];
//get div count and bulid last id
var lastStr = $('div:last').attr('id').match(re)[1],
lastID = $('div:last').attr('id').match(re)[2];
//if we have any div but the last, swap it with the end
if ( id !== lastID ) {
$(this).insertAfter('#'+lastStr+lastID);
}
//otherwise, move the last one to the top of the stack
else {
$(this).insertBefore('div:first');
} });
Check out this working fiddle: http://jsfiddle.net/sQYhD/
You may also be interested in the jquery-ui library: http://jqueryui.com/demos/sortable/

jQuery create element initially hidden

Is there a way to create an element and have it hidden initially? I am creating an iframe but don't want it shown right away.
Very simple. Just do this:
var myFrame = $("<iframe>").hide();
var my_iframe = $('<iframe name="your_iframe" src="your_source"></iframe>');
now my_iframe holds your jQuery created iframe. Modify it, do what you wish and then put it in the dom.
It wont be visible until you insert it into the dom.
Just create it and style it as being hidden, in one of many possible ways, like this:
var secretThing = $('<iframe></iframe>', { css: { 'display': 'none' }});
$('body').append(secretThing);
Another way to make something hidden is to position it far off the viewport, or to put it behind something else, or to set some dimension to zero. It depends on the rest of your design. Personally, I'd be inclined to give the element a class value that makes it hidden.
(#gilly3 wisely notes that the handy jQuery "hide" function might be a simple way to do this.)
var theElement = <create the iframe here>;
theElement.hide();
// append theElement here
Like this:
var FName = $("<iframe>").hide();

Categories