使用 jQuery .length 查找对象的数量答案

【问题标题】：Using jQuery .length to find number of objects使用 jQuery .length 查找对象的数量
【发布时间】：2014-04-02 21:49:00
【问题描述】：

所以我有一个页面，其内容是通过 JavaScript 对象/原型创建的，我正在尝试使用 jQuery .length 来查找名称属性的数量，然后将结果显示在表格中。

这是一个示例对象/原型——其中有 38 个，所以理想情况下，结束代码应该返回 38：

function Player (n, c, s, y, t) {
    this.name = n; 
    this.team = c;
    this.salary = s; 
    this.years = y;
    this.type = t;
}

var mwQB1 = new Player ("D. Brees", "NO", 31, 0, "FTE");

这是应该计算并在 id="teamStatsSize" 中发布结果的函数：

 $("document").ready(function () {
    var mwCalcRoster = function () {
    var mwRosterSize = $("prototype[name]").length;
    var mwElementRoster = document.createElement("p");
    mwElementRoster.innerHTML = mwRosterSize; 
    document.getElementById("teamStatsSize").appendChild(mwElementRoster);
} 
mwCalcRoster(); });

代码的工作原理是它确实发布在正确的位置，它只是发布 0 而不是 38。

感谢您的帮助！！！

【问题讨论】：

确保脚本在内容生成之后运行。
看这个：stackoverflow.com/questions/16976904/…
代码嵌套在 $("document").ready 在定义“播放器对象”变量并调用显示它们的函数之后，所以这应该不是问题。 lo-dash 解决方案有点超出我的经验水平。我尝试了几种不同的方法都无济于事。无论我是否使用对象/原型/播放器，我似乎都无法获得识别对象的代码。

标签： javascript jquery arrays attributes

【解决方案1】：

您目前的情况存在一些问题。我看不到您的 html 标记，但我假设您想获取 teamStatSize 内的玩家数量并在添加新玩家时更新它。

$("prototype[name]").length

不确定您在这里的目的是什么，但也许要计算玩家原型的数量？我认为这不能正常工作，但你很接近。如果您愿意，您可以计算容器中的段落标签数量。

我已尝试为您模拟和示例。确保这个函数在你引用了 jQuery 之后运行。最好在页面底部关闭正文之前，我们不需要 .ready 因为所有的 DOM 都会被加载。

一些HTML：

<div id="teamStatsSize">    
  <div id="count">Total Number of Players: <span>0</span></div>
</div>

定义你的玩家构造器。

function Player (n, c, s, y, t) {
  this.name = n; 
  this.team = c;
  this.salary = s; 
  this.years = y;
  this.type = t; 
}

然后我们创建一个自调用函数，在您的函数和逻辑中命名空间。我们将 jQuery 作为 $ 传入，这使得 jQuery 在对象内部可用。

(function($){
    var app = {
        init: function() {
            this.addPlayer("Steve S", "CAR", 31, 0, "FTE");
            this.addPlayer("TO", "??", 31, 0, "FTE");
            this.addPlayer("Mike Vick", "JETS", 31, 0, "FTE");
            this.addPlayer("Eli Manning", "NY", 31, 0, "FTE");
        },
        mwCalcRoster: function(){
            var updateRosterSize = app.mwRosterSize();
        },
        players: [],
        addPlayer: function(n, c, s, y, t) {
            var $container = $('#teamStatsSize');

            // Create the player, add to a player array. 
            var playername = new Player (n, c, s, y, t);

            // Push the new player to an array. 
            app.players.push(playername);

            $container.append('<p>Name: '+playername.name+', Salary: '+playername.salary+', Team: '+playername.team+', Years: '+playername.years+', Type: '+playername.type+'</p>');

            // Update the Player Count
            app.updateRosterSize();

        },
        mwRosterSize: function() {
            return this.players.length || 0;
        },
        updateRosterSize: function() {
            var size = this.mwRosterSize();
            $('#count span').html(size);
        }

    }
    // Expose "app" object to the window. 
    window.app = app;
}(jQuery));

现在我们在窗口上有了“app”对象，我们可以这样称呼它。继续，如果您前往 devtools / firebug 中的控制台并输入“app”，您将看到我们的对象。

app.init(); // This will add the 4 players we create inside the init function. 

app.mwRosterSize(); // Returns 4, which is the length of the app.players array. 

app.addPlayer("New Guy", "NY", 31, 0, "FTE"); // Add new player.

实际上有数百种方法可以做到这一点。希望这对您有所帮助。

【讨论】：