如何在javascript中访问类中的数组项

Question

我正在使用开源 js 库 Cesium。在这个js中，一个类被定义为一个带有空数组[]的容器。推送用于添加到此数组。 HTML 将整个容器显示为画布。我想使用 jquery 为数组的每个项目添加一个工具提示，但不知道该怎么做。我可以为容器添加工具提示，但不能为容器中的项目添加工具提示。
在下面的代码中，“cesium-timeline-tracks”类是我感兴趣的。

请帮忙。以下是代码片段：

Javascript 文件：

    function Timeline(container, clock) {
    container = getElement(container);

    this.container = container;

    var topDiv = document.createElement('div');
    topDiv.className = 'cesium-timeline-main';
    container.appendChild(topDiv);
    this._topDiv = topDiv;

    this._topDiv.innerHTML = '<div class="cesium-timeline-trackContainer">' +
    '<canvas class="cesium-timeline-tracks" width="10" height="1">' +
    '</canvas></div><div class="cesium-timeline-bar"></div><div class="cesium-timeline-needle"></div><span class="cesium-timeline-ruler"></span>';

    this._trackContainer = this._topDiv.childNodes[0];
    this._trackListEle = this._topDiv.childNodes[0].childNodes[0];
    this._timeBarEle = this._topDiv.childNodes[1];
    this._needleEle = this._topDiv.childNodes[2];
    this._rulerEle = this._topDiv.childNodes[3];
    this._context = this._trackListEle.getContext('2d');

    this._trackList = [];
    this._highlightRanges = [];

数组中的每一项都是使用push添加的：

Timeline.prototype.addTrack = function(interval, heightInPx, color, backgroundColor) {
    /* EN added parameter id*/
    var newTrack = new TimelineTrack(interval, heightInPx, color, backgroundColor);
    this._trackList.push(newTrack);
    this._lastHeight = undefined;
    this.resize();
    return newTrack;
};

要添加一个项目，我只需要调用timeline.addTrack(...); 下面是我如何将它用于 cesium-timeline-tracks 类，但我想将其用于数组 _trackList 中的项目。请帮忙。

    $(document).ready(function() {
    $(".cesium-timeline-tracks").attr("title", "This is a tooltip for the timetracks.");
    $(document).tooltip({
        position: {
        my: "left bottom-20",
        at: "left top"
        }
    });
});

实施 Ted 的建议，但仍不显示每个项目，仅显示整个容器。下面是代码。请注意，时间线变量是先前创建的，它是时间线容器（代码中未显示）。我尝试了 viewer.timeline._trackList，但这导致工具提示一起消失。

$(document).ready(function() {
     //$(".cesium-timeline-tracks").attr("title", "This is a tooltip for the timetracks.");
    $.each(viewer.timeline, function (index, element) {
        $(element).attr("title", "tooltip for " + index);
        $(element).tooltip ({
            position: {
            my: "left bottom-20",
            at: "left top"
            }
        });
    });
});

在 .each 中将 viewer.timeline 更改为 viewer.timeline._trackList，在 jquery-1.11.0.min.js 中出现错误类型“d.addEventListener is not a function”。控制台将索引 0 显示为 [object Object]。

$(document).ready(function() {
    $.each(viewer.timeline._trackList, function (index, element) {
      console.log("****** the index " + index + " is " + element + ".");
$(element).attr("title", "tooltip for " + index);
    $(element).tooltip ({
        position: {
                  my: "left bottom-20",
            at: "left top"
            }
        });
    });
});

控制台输出：索引 0 是 [object Object]。

Answer 1

在不了解 Cesium 的情况下，我的第一印象是使用 $.each 迭代数组...

$.each(Timeline._trackList, function(index, element){

      $(element).tooltip ...

});

jQuery .each Docs