Использование jQuery .length для поиска количества объектов

Question

Итак, у меня есть страница, содержимое которой создается с помощью объектов/прототипов 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");  

Вот функция, которая должна вычислить и отправить результат в ид = «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.

Спасибо за помощь!

Answer 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; 
} 

Затем мы создаем функцию self-invoking, которая содержит пространства имен в ваших функциях и логике. Мы передаем 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.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. 

Существует буквально сотни способов сделать это. Надеюсь, это помогло вам.