Jquery只追加到第一类元素
Jquery only appending to first class element
对于第一次迭代它工作得很好,表按预期创建。然而,在第二次迭代时,下拉菜单为空。循环都工作正确,所以我假设它必须与我如何追加选择的选项有关。谢谢你的帮助。
Javascriptfunction loadPlayers() {
//first ajax call to retrieve players
$.ajax({
url: '/players',
type: 'GET',
contentType: "application/json",
success: function(data) {
//second ajax call to retrieve presentations
$.ajax({
url: '/presentations',
type: 'GET',
contentType: "application/json",
success: function(presentationData) {
// loop through each player and append player/presentation to table
data.forEach(function(player) {
console.log("players")
$(".player-table").append(
$('<tr>').append(
$('<td>').attr('class', 'player-td').append(player.name),
$('<td>').attr('class', 'presentation-td').append(player.presentation),
$('<td>').attr('class', 'new-presentation-td').append(
$('<select>').attr('class', 'new-presentation-dropdown').append(
// loop through each presentation in database and add to dropdown
presentationData.forEach(function(presentation) {
console.log(presentation.name);
$(".new-presentation-dropdown").append('<option>' + presentation.name + '</option>')
})
)
)
)
)
})
}
})
}
})
}
HTML <table class="player-table">
<tr class="player-name-tr">
<th>Player Name</th>
<th>Current Presentation</th>
<th>New Presentation</th>
</tr>
</table>
您正在append语句内运行第二个循环-这意味着在创建<select>
之前运行附加选项的循环。由于select
元素尚未创建,$(".new-presentation-dropdown")
在DOM中没有匹配任何内容。将循环附加到所有.append()
语句之外的选项应该可以修复这个问题:
data.forEach(function(player) {
console.log("players");
$(".player-table").append(
$('<tr>').append(
$('<td>').attr('class', 'player-td').append(player.name),
$('<td>').attr('class', 'presentation-td').append(player.presentation),
$('<td>').attr('class', 'new-presentation-td').append(
$('<select>').attr('class', 'new-presentation-dropdown')
)
)
);
// loop through each presentation in database and add to dropdown
presentationData.forEach(function (presentation) {
console.log(presentation.name);
$(".new-presentation-dropdown").append('<option>' + presentation.name + '</option>')
})
});
然而$(".new-presentation-dropdown")
将匹配每个创建的<select>
,因此会给出奇怪的结果。我建议您将$('<select>')
分配给变量并将选项附加到变量,然后将其附加到表中,像这样:(未经测试但应该工作)
data.forEach(function(player) {
console.log("players");
var $newPresentationDopdown = $('<select>').attr('class', 'new-presentation-dropdown');
// loop through each presentation in database and add to dropdown
presentationData.forEach(function (presentation) {
console.log(presentation.name);
$newPresentationDopdown.append('<option>' + presentation.name + '</option>')
});
$(".player-table").append(
$('<tr>').append(
$('<td>').attr('class', 'player-td').append(player.name),
$('<td>').attr('class', 'presentation-td').append(player.presentation),
$('<td>').attr('class', 'new-presentation-td').append($newPresentationDopdown)
)
);
});
基于append方法文档,您可以通过以下特性传递函数:
一个返回HTML字符串、DOM元素、文本节点或jQuery对象的函数,用于在匹配元素集合中的每个元素的末尾插入。接收元素在集合中的索引位置和该元素的旧HTML值作为参数。在函数中,this指的是集合中的当前元素。
而下面的代码不一致:
$('<select>').attr('class', 'new-presentation-dropdown').append(
// loop through each presentation in database and add to dropdown
presentationData.forEach(function(presentation) {
console.log(presentation.name);
$(".new-presentation-dropdown").append('<option>' + presentation.name + '</option>')
})
)
传递的函数不返回任何结果
相关文章:
- 如何按id查找两个类中任一类的子元素
- 不能对包含同一类的所有元素使用.replacement()
- 如何从同一元素中删除同一类
- 对同一类中的所有元素单击一次
- 向下滚动后如何用同一类逐个删除元素
- 单独检测共享同一类的元素
- 获取元素的第一类
- 在jQuery中,如何测试一个元素是否是同一类的多个元素中的第一个
- 将水印添加到具有一类水印的所有输入元素
- 如何使用javascript欺骗拖动同一类的所有元素
- 如何将样式应用于类的单个元素,同时从同一类的前一个元素中删除样式
- jQuery .text() 在同一类中的多个元素上
- 查找类为'的元素;x',忽略那些有class的'x'和另一类
- 如何从 jquery 中属于同一类成员的元素中获取所有不同的值
- 只在
- 的第一个子元素上应用JQuery属于某一类的
- 使用JavaScript,如何将相同的文本写入多个HTML元素,或者如何将文本写入同一类的所有HTML元素
- 如何为同一类的多个元素设置不同的位置
- 删除,,从同一类的所有元素中获取
- 获取同一类元素中的图像属性
- 单击任意img时隐藏一类元素