使用 jquery 访问数组中的数据答案

【问题标题】：Access data from an array with jquery使用 jquery 访问数组中的数据
【发布时间】：2013-10-24 09:46:38
【问题描述】：

我试图循环遍历一个数组，但我似乎无法从我的数组中提取数据...

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,
     });
 });

【问题讨论】：

另外，考虑使用数组字面量语法[elem1, elem2...] 而不是构造函数语法new Array(elem1, elem2...)。它更易于阅读，含义完全相同。

标签： javascript jquery arrays

【解决方案1】：

您正在向 html 添加对象 .... 使用 . 运算符获取实际值

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

我从对象中获取 id 并将其显示在 div 中。你可以在那里添加任何你需要的东西。

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

fiddle here

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

从上面的代码。

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

差异，

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

不同之处在于，value 是传递给fadeOut 函数的整个数组对象，访问数组中的每个元素都会得到结果。

【讨论】：