使用jquery从数组访问数据

时间:2013-10-24 09:46:38

标签: javascript jquery arrays

我试图循环一个数组只是我似乎无法从我的数组中提取数据......

http://jsfiddle.net/338Ud/

var listTicker = function (options) {

     var defaults = {
         list: [],
         startIndex: 0,
         interval: 3 * 1000,
     }
     var options = $.extend(defaults, options);

     var listTickerInner = function (index) {

         if (options.list.length == 0) return;

         if (!index || index < 0 || index > options.list.length) index = 0;

         var value = options.list[index];

         options.trickerPanel.fadeOut(function () {
             $(this).html(value).fadeIn();
         });

         var nextIndex = (index + 1) % options.list.length;

         setTimeout(function () {
             listTickerInner(nextIndex);
         }, options.interval);

     };

     listTickerInner(options.startIndex);
 }

 var textlist = new Array({
     id: 0,
     name: 'Antonia Lallement',
     title: '\u003cp\u003e\u003cspan\u003eConsultant\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI started as a resourcer at company three months ago so I\u0026rsquo;m a new team member. Sin...',
     image: 'antonia.jpg'
 }, {
     id: 1,
     name: 'Camilla Gobel',
     title: '\u003cp\u003e\u003cspan\u003eBusiness Manager\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI joined company in 2011. As a multilingual Consultant, my initial focus was the provisi...',
     image: 'camilla.jpg'
 }, {
     id: 2,
     name: 'Mark Dorey',
     title: '\u003cp\u003e\u003cspan\u003eDiscipline Manager (Process, Subsea, Project, Safety)\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eWhen I joined company I started as a resourcing specialist and worked across Search and ...',
     image: 'mark.jpg'
 }, {
     id: 3,
     name: 'Sadia Butt',
     title: '\u003cp\u003e\u003cspan\u003eDiscipline Manager (Mechanical, Piping, Structural)\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI couldn\u0026rsquo;t have asked for a better company to work for! After working as a resourc...',
     image: 'sadia.jpg'
 }, {
     id: 4,
     name: 'Samantha Linnert',
     title: '\u003cp\u003e\u003cspan\u003ePayroll Assistant\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI began at company as an operations assistant learning to spec CVs and post jobs. Shortl...',
     image: 'samantha.jpg'
 }, {
     id: 5,
     name: 'Simon Cottenham',
     title: '\u003cp\u003e\u003cspan\u003eConsultant, Middle East\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI have been with company for exactly one year now, I never would have believed that I wo...',
     image: 'simon.jpg'
 }, {
     id: 6,
     name: 'Vicky Spencer',
     title: '\u003cp\u003e\u003cspan\u003ePayroll Manager\u003c/span\u003e\u003c/p\u003e',
     bio: '\u003cp\u003eI started my career at company in July 2012 initially covering maternity leave, managing...',
     image: 'vicky.jpg'
 });

 $(function () {
     listTicker({
         list: textlist,
         startIndex: 0,
         trickerPanel: $('.textbox'),
         interval: 3 * 1000,
     });
 });

3 个答案:

答案 0 :(得分:1)

您要将对象添加到html ....使用.运算符来获取实际值

....
  options.trickerPanel.fadeOut(function () {
    $(this).html(value.id).fadeIn();
            //--------^^^----here
 }

我从对象中获取id并在div中显示它...你可以在那里添加你需要的任何内容..

$(this).html(value.title).fadeIn(); //to get title

fiddle here

答案 1 :(得分:1)

$.each(textlist, function(index, value){
//do stuff with your array
});

答案 2 :(得分:0)

粘贴差异,我试图在下面获取数据。

从上面的代码。

options.trickerPanel.fadeOut(function () {
         $(this).html(value).fadeIn();
});

差异,

options.trickerPanel.fadeOut(function () {
     $(this).html(value.bio).fadeIn();
});

区别在于value是整个数组对象传递给fadeOut函数,访问数组中的每个元素都会得到结果。