我有一个主干模板来表示足球运动员的名单。渲染后，我通过在其中插入其他模板来修改一些模板元素。视图的 render() 函数是：
render: function () {
that = this;
this.$el.html(template(this.model.attributes));
var homeTeam = new player.PlayerCollection({team_id: this.model.get('home_id')});
homeTeam.fetch({
data: { forward_first:true, exlude_keepers:true},
processData: true,
success:function (collection) {
var forwards = collection.where({'position':'Forward'});
new PlayerListGoalView({players: forwards,
position:"Forward",
el: $("#home-forwards", that.el),
player_id:that.player_id
});
}
});
this.prepareList();
},
生成的 html 有一系列嵌套列表，例如：
<ul id="expList" class="topcoat-list list">
<li id="home-forwards">
<ul class="topcoat-list list">
<li class="topcoat-list__item " id="player-713">
<span>Fabio Borini</span>
</li>
<li class="topcoat-list__item " id="player-696">
<span>Jozy Altidore</span>
</li>
<li class="topcoat-list__item " id="player-697">
<span>Mikael Mandron</span>
</li>
</ul>
</li>
<li id="away-forwards">
</li>
<li id="home-midfielders">
</li>
<li id="away-midfielders">
</li>
<li id="home-defenders">
</li>
<li id="away-defenders">
</li>
</ul>
在prepareList()中，我得到了主ul，然后是li子拥有自己的ul：
prepareList: function(){
var ul = this.$('#expList');
var el = ul.find('li:has(ul)');
console.log('ul.length is:');
console.log(ul.length);
console.log('el.length is:');
console.log(el.length);
},
这导致“ul.length is:1”和“el.length is:0”。所以它得到的是ul，而不是li。
当我在 chrome 检查器中展开 ul 标签时，我可以看到 firstElementChild 是 li#home-forwards 并且所有的 innerHTML 都如上。然而它仍然不知何故无法得到里。
现在，如果我将上面的 html 硬编码到模板中，就会找到 ul 和 li ！
有任何想法吗？