/    Sign up×
Community /Pin to ProfileBookmark

Append Divs and determine length

All,
I have the following bit of code:

[CODE]
<script>
jQuery(document).ready(function() {
var url=’http://search.twitter.com/search.json?callback=?&q=test’;
jQuery.getJSON(url,function(json){
jQuery.each(json.results,function(i,review){
jQuery(“#divroller_container”).append(‘<div class=”reviews” id=item’+i+’>’+review.text+'<br>Reviewed By: ‘+review.from_user+'</div>’);
//jQuery(“#divroller_container”.children()[i]).hide();
});
});
});

var hiddenDivs = [];

function start(pause, visible_divs) {
var container = jQuery(“#divroller_container”);
var divs = container.children();
var visible = visible_divs
alert(divs.length);
while (visible < divs.length) {
var removedDiv = jQuery(divs[divs.length – 1]).remove();
hiddenDivs.push(removedDiv);
divs = container.children();
}

setTimeout( function() {
roll(container, pause, visible)
}, pause);
}

function roll(container, pause, visible) {
container.prepend(hiddenDivs.pop());
hiddenDivs.unshift(jQuery(container.children()[visible]).remove());

//Efect
jQuery(container.children()[0]).hide();
jQuery(container.children()[0]).slideDown(“slow”);

//Repeat
setTimeout( function() {
roll(container, pause, visible)
}, pause);
}
</script>

<div id=”divroller_container”>
</div>
<script type=”text/javascript”>
start(2000, 1);
</script>
[/CODE]

I’m baiscally trying to get some twitter feeds and the rotate them. I can get it and everything like that but for some reason the jQuery doesn’t pick up the divs that I appended to the container because when I alert the div.length like this:

[CODE]
alert(divs.length);
[/CODE]

The result is always zero. The code works fine if I can populate that value but if I don’t have it in the code before hand it doesn’t work. However if I add a div to the container like this:

[CODE]
<div id=”item1″ class=”reviews”>
<a href=”http://ilkinbalkanay.blogspot.com/2007/11/my-favorite-shell-commands.html”>My favorite shell commands</a>
</div>
[/CODE]

That same code:

[CODE]
alert(divs.length);
[/CODE]

Will output a 1. I’m not sure how to have jquery recognize that I appended the divs earlier. Any help would be great! Thanks in advance!

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@Declan1991Nov 10.2011 — The problem doesn't seem to be HTML, it seems to be innerHTML. There is no guarantee that elements added to the page with innerHTML will be added into the DOM tree correctly.
Copy linkTweet thisAlerts:
@treeleaf20authorNov 11.2011 — I think you're right. I've been told to look into .live() or .delegate() jquery but those look like they are created using click events. I want my divs to be appended as the page loads and not sure how to do that. Any advice you could give I'd greatly appreciate it!

Thanks
Copy linkTweet thisAlerts:
@Declan1991Nov 11.2011 — I can tell you that .createElement(), .appendChild() and possible .setAttribute() (as an aside, I prefer el.height to el.setAttribute("height")) are the DOM functions you need. If jQuery has an implementation of them, I have no idea.
×

Success!

Help @treeleaf20 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...