Question

我有一个div <div id="MetricsParentModelList"></div>。在这个div中，我正在动态添加ul元素

$("#MetricsParentModelList").append('<ul class="modal__list mCustomScrollbar" id="MetricsParentModelListUl"></ul>');

此后，我遍历JSON对象并将li元素动态添加到此ul元素

for (var i = 0; i < metricsParentModel.length; i++) {
    var obj = metricsParentModel[i];
    $("#MetricsParentModelListUl").append('<li data-parentid=' + obj.ModelTypeYearID + ' data-name=' + obj.ModelTypeName + ' data-value=' + obj.ModelTypeID + ' data-id=' + obj.ModelTypeID + ' class="mModel"><a href="#"> ' + obj.ModelTypeName + '</a></li>');
}

问题是li标签的“ data-parentid”，“ data-name”，“ data-value”，“ data-id”不起作用。当我静态添加li元素时，它们确实可以正常工作。我如何使其动态地工作。

Answer 1

您需要在数据属性周围加上引号。接下来，我在每个数据属性周围添加“。

注意-您是否正在将对象放入托盘进行迭代。我刚刚根据我的建议和一些虚拟数据创建了一个模拟的代码版本，并且按预期运行。

var metricsParentModel = [{
'ModelTypeYearID': '1992',
'ModelTypeName':  'Charger',
'ModelTypeID': '1'
}, {
'ModelTypeYearID': '1998',
'ModelTypeName':  'Ranger',
'ModelTypeID': '2'
}]

$("#MetricsParentModelList").append('<ul class="modal__list mCustomScrollbar" id="MetricsParentModelListUl"></ul>');


for (var i = 0; i < metricsParentModel.length; i++) {
    var obj = metricsParentModel[i];
    $("#MetricsParentModelListUl").append('<li data-parentid=' + obj.ModelTypeYearID + ' data-name=' + obj.ModelTypeName + ' data-value=' + obj.ModelTypeID + ' data-id=' + obj.ModelTypeID + ' class="mModel"><a href="#"> ' + obj.ModelTypeName + '</a></li>');
    
console.log(obj.ModelTypeYearID + ' / ' + obj.ModelTypeName + ' / ' + obj.ModelTypeID + ' / ' + obj.ModelTypeID );
 //gives 1992 / Charger / 1 / 1 and 1998 / Ranger / 2 / 2
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="MetricsParentModelList"></div>

数据属性不适用于动态添加的li元素

1 个答案: