Javascript array object in jquery

Question 1

I have following code snippet in jquery.In which,I want to animate each element of array one by one.

<script type="text/javascript">
 function AnimateText() {
 var myCars = new Array("Saab", "Volvo", "BMW");
 myCars.each(function () {
 $(this).fadeIn("2000").fadeOut("2000");
 });
 }
 </script>

But I am getting this error Object does not support this method or property

EDIT

Thanks all for the answer.Now I have problem in animating the array element on the screen.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default7.aspx.cs" Inherits="Default7" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 function AnimateText() {
 var myCars = new Array("Saab", "Volvo", "BMW");
 $.each(myCars, function (key, value) {
 $("#myDiv").html(value).fadeIn("2000") ;
 });
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="myDiv"></div>
 <input type="button" id="btnTest" value="Animate" onclick="AnimateText();" />
 </form>
</body>
</html>

Question 2

You need to use the static $.each() method:

var myCars = ["Saab", "Volvo", "BMW"];
// Capture this because inside the loop it will have a different meaning
var $this = $(this);
$.each(myCars, function () {
 $this.fadeIn("2000").fadeOut("2000");
});

You also probably want to show this text in some DOM element:

var myCars = ["Saab", "Volvo", "BMW"];
$.each(myCars, function () {
 $('#spinner').html(this).fadeIn("2000").fadeOut("2000");
});

where for example spinner is a div:

<div id="spinner"></div>

UPDATE:

After seeing your update it is more clear to me what you are trying to achieve. You could use the .delay() method:

var myDiv = $('#myDiv');
var myCars = ['Saab', 'Volvo', 'BMW'];
$('#btnTest').click(function() {
 $.each(myCars, function(index, value) {
 var val = value;
 myDiv.delay(1000).fadeIn(1000, function() {
 myDiv.text(val);
 });
 });
});

And here's a live demo.

Question 3

don't get this, inside loops jquery's this always refers to the current obj in the loop

Question 4

@ezmilhouse, yes, that's why you might need to capture the one outside the loop. Anyway calling .fadeIn on a string doesn't make much sense, that's why I thought the OP needed to show this on some other object.

Question 5

I am not getting any error,but I don't see any animation on the screen

Question 6

@geek, where do you want to see the animation? You might need to use some selector: $('.foo').fadeIn(... in order to select the element where you want the animation to appear. Please see my updated answer for a sample.

Question 7

you don't see any animation, because $this is not the jquery obj your looking for, just a wrong answer

Question 8

you should use it like this:

$.each(myCars, function(key, value){
 alert(value);
});

http://api.jquery.com/jQuery.each/

Question 9

function AnimateText() {
 var myCars = new Array("Saab", "Volvo", "BMW");
 $(myCars, function( key, value ) {
 $('#' + value).fadeIn("2000").fadeOut("2000");
 });
}

Better solution would be having html divs with IDs (Saab, Volvo, etc ...) and having a shared class .cars:

$(".cars").each(function(){
 $(this).fadeIn("2000").fadeOut("2000");
});

Question 10

I tried your second approach.In this call all the div elements are fading and fade out at the same time ,but I want one by one

Question 11

guess each is too fast, try to add a delay()

Question 12

This should be more close to what you are expecting from your code, I think :P

var myCars = Array("Saab", "Volvo", "BMW");
var currentCar = 0;
var myDiv = $('#myDiv');
function AnimateText() {
 var car = myCars[currentCar++];
 if (car) {
 myDiv.html(car).fadeIn('2000', function() {
 myDiv.fadeOut('2000', AnimateText);
 })
 }
}

Darin Dimitrov 1.0m277 gold badges3.3k silver badges3k bronze badges · Accepted Answer · 2011-04-26 12:38:04Z

You need to use the static $.each() method:

var myCars = ["Saab", "Volvo", "BMW"];
// Capture this because inside the loop it will have a different meaning
var $this = $(this);
$.each(myCars, function () {
 $this.fadeIn("2000").fadeOut("2000");
});

You also probably want to show this text in some DOM element:

var myCars = ["Saab", "Volvo", "BMW"];
$.each(myCars, function () {
 $('#spinner').html(this).fadeIn("2000").fadeOut("2000");
});

where for example spinner is a div:

<div id="spinner"></div>

UPDATE:

After seeing your update it is more clear to me what you are trying to achieve. You could use the .delay() method:

var myDiv = $('#myDiv');
var myCars = ['Saab', 'Volvo', 'BMW'];
$('#btnTest').click(function() {
 $.each(myCars, function(index, value) {
 var val = value;
 myDiv.delay(1000).fadeIn(1000, function() {
 myDiv.text(val);
 });
 });
});

And here's a live demo.

don't get this, inside loops jquery's this always refers to the current obj in the loop
@ezmilhouse, yes, that's why you might need to capture the one outside the loop. Anyway calling .fadeIn on a string doesn't make much sense, that's why I thought the OP needed to show this on some other object.
I am not getting any error,but I don't see any animation on the screen
@geek, where do you want to see the animation? You might need to use some selector: $('.foo').fadeIn(... in order to select the element where you want the animation to appear. Please see my updated answer for a sample.
you don't see any animation, because $this is not the jquery obj your looking for, just a wrong answer

CollectivesTM on Stack Overflow

Javascript array object in jquery

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

4 Answers 4

6 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related