![](/img/trans.png)
[英]How do a manipulate the DOM in order to nest elements using Javascript?
[英]How do I use a promise to manipulate a DOM object in a specific order?
我有一个非常简单的问题,但我无法弄清楚。 我有以下两行代码:
$(this).addClass('unavailable');
$(this).html('00');
我希望元素(this)在html设置为00之前应用不可用的类。如果在应用该类之前将html设置为00,则以非常难看的方式显示00。 有没有一种方法可以利用JQuery中的Promise确保第二行不在第一行之前执行?
我考虑过使用setTimeout,但是这似乎是一个麻烦的解决方法。
编辑:因为你们中的许多人都提到我不必使用诺言,所以我将包括以下完整功能。
该函数将表格中的一行填满。 该行代表一周,整个表代表日历中的一个月。 该日历的特殊之处在于某些日期无效,并且需要将.unavailable类应用于它们,从而使其不可见。 为了保持适当的间距,请在当天输入00。
$ scope.loadMonth()方法每周两次调用该函数五次。 我以为我需要一个诺言,是因为当我在月份之间切换时(因此再次调用$ scope.loadMonth()),在应用不可用的类之前,零会立即显示。
$scope.loadWeek = function(month, week, index) {
// error check
if(week < 1 || week > 5) { console.log("airQualityController.loadWeek(): week parameter must be between 1 and 5 (including 1 and 5).") }
if(typeof(month) != 'number') { console.log('airQualityController.loadMonth(): parameter month must be a number, was typeof: ' + typeof(month)); }
if(month < 0 || month > 11) { console.log('airQualityController.loadMonth(): parameter month must range from 0 to 11, value was: ' + month ); }
var week = $('#week' + week);
var days = week.children('td');
days.each(function(i) {
// use index parameter (from loadWeek not days.each) to find the correct date
var date = $scope.dates[index];
// reset all CSS classes
$(this).removeClass();
if(index >= 0 && index < 90) {
// attach date as an attribute
$(this).data('date', date.getDate());
$(this).data('month', date.getMonth());
$(this).data('dateStr', $scope.dateToStr(date));
//console.log($(this).data('date'));
// append date to the inside of <td>
$(this).html(date.getDate());
// if it's selected give it the selected class
if($scope.selectedDate === $(this).data('dateStr')) { $(this).addClass('selected'); }
// if day is not in the current month, give it gray styling
if(date.getMonth() != month) { $(this).addClass('gray-date'); }
// remove all event listeners
$(this).off('click');
// on click, update the scope's selectedDate variable and add selected CSS class
$(this).click(function() {
// update selected class
$('.calendar .selected').removeClass('selected');
$(this).addClass('selected');
// update global selectedDate variable
$scope.selectedDate = $(this).data('dateStr');
// if it was a gray date from another month, switch to that month
if($(this).hasClass('gray-date')) {
var newMonth = Number($(this).data('month'));
$scope.loadMonth(newMonth);
}
$scope.updateMap();
});
} else {
// day is outside the 90 day range and is therefore unavailable
$(this).addClass('unavailable');
$(this).html('00');
}
index++;
});
}
与您一起修订新问题这可能是保留旧值的经典问题,该值最初显示为新月份。 可能是由于以下原因造成的:
// reset all CSS classes
$(this).removeClass();
您可以尝试将所有td
元素设置为空字符串。 像这样:
$(this).html(' ').removeClass();
原始答案
完成此操作的最简单方法是使用.promise()
方法。 您可以将其直接附加到集合,并使用.then()
方法确定操作的顺序。
从您的样本中:
$(this).addClass('unavailable').promise().then(function(){
$(this).html('00');
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.