Javascript 将类应用于调用AJAX的HTML中的div?

Javascript 将类应用于调用AJAX的HTML中的div?,javascript,jquery,html,css,ajax,Javascript,Jquery,Html,Css,Ajax,我正在加载更多按钮上添加新的HTML,如下所示: function addStuff() { $.get('page-partials/more-stuff.html', function(stuff) { $('#load-button').append(stuff); }); }; 问题是,这些新内容被放入一个容器(具有动态高度),当添加更多内容时,我希望将其设置为动画。由于这个原因,每次再次添加模板时,我都需要向“more stuff.html”中的divs添加一个动

我正在加载更多按钮上添加新的HTML,如下所示:

function addStuff() {
  $.get('page-partials/more-stuff.html', function(stuff) {
    $('#load-button').append(stuff);
  });
};  
问题是,这些新内容被放入一个容器(具有动态高度),当添加更多内容时,我希望将其设置为动画。由于这个原因,每次再次添加模板时,我都需要向“more stuff.html”中的divs添加一个动态类

例如:


下一次添加时:

<div class='stuff added2'></div>

等等,这可能吗?否则,是否有人知道将高度从一个未确定的非零数字更改为另一个未确定的非零数字的解决方案?

如何

var count = 0;
$.get('page-partials/more-stuff.html', function(stuff) {
    count++;
    $('#load-button').append(stuff).addClass('stuff added'+count);
});
那怎么办

var count = 0;
$.get('page-partials/more-stuff.html', function(stuff) {
    count++;
    $('#load-button').append(stuff).addClass('stuff added'+count);
});

实际上,vivek提到了一个更好的方法,但必须是这样的:

var stuff='动态附加div';//ajax响应
var h=$(stuff).height();//找出它的高度。
$('.stuff').append(stuff).css('height',h);//追加后只需更新高度。
.stuff{
高度:60px;
宽度:100px;
边框:2px实心#f00;
-webkit过渡:高度0.8s,易于进出;
-moz过渡:高度0.8s缓进缓出;
-o型过渡:高度0.8s缓进缓出;

过渡:高度0.8s缓进缓出;/*实际上vivek提到了一个更好的方法,但必须是这样的:

var stuff='dynamicaddeddiv';//ajax响应
var h=$(stuff).height();//找出它的高度。
$('.stuff').append(stuff).css('height',h);//append之后只需更新高度。
.stuff{
高度:60px;
宽度:100px;
边框:2px实心#f00;
-webkit过渡:高度0.8s,易于进出;
-moz过渡:高度0.8s缓进缓出;
-o型过渡:高度0.8s缓进缓出;

转换:高度0.8s易入易出;/*尝试在每次调用
addStuff

function addStuff() {
  // `return` jQuery promise object from `addStuff`
  return $.get('page-partials/more-stuff.html', function(stuff) {
    $('#load-button').append(stuff);
  });
}; 

var added = function() {
  $(".stuff").each(function(index) {
    $(this).addClass("added" + index + 1)
  })
}

addStuff().then(added);

尝试将
added
函数链接到
addStuff

function addStuff() {
  // `return` jQuery promise object from `addStuff`
  return $.get('page-partials/more-stuff.html', function(stuff) {
    $('#load-button').append(stuff);
  });
}; 

var added = function() {
  $(".stuff").each(function(index) {
    $(this).addClass("added" + index + 1)
  })
}

addStuff().then(added);

将高度设置为“自动”。您可以使用
转换
高度
属性设置为
-webkit转换:高度0.8s缓入缓出;-moz转换:高度0.8s缓入缓出;-o-转换:高度0.8s缓入缓出;转换:高度0.8s缓入缓出;
以及每次填充数据时此转换将设置其
高度的动画。@vivekkupadhyay是的,我知道这些CSS属性。问题是它们只适用于声明的固定值高度更改。我希望设置动画的容器div的高度为“自动”,并且正在其中添加div,导致其高度增加。好了,CSS动画对她不起作用e、 是
stuff
div
元素添加到
中吗?@JohnDoe是
stuff
变量,位于
$.get()
回调元素
?将高度指定为“自动”。您可以使用
转换
作为
高度
属性-webkit转换:高度0.8s缓进-出;-moz转换:高度0.8s缓进-出;-o-转换:高度0.8s缓进-出;转换:高度0.8s缓进-出;
以及每次当data已被填充此转换将设置其
高度的动画。@vivekkupadhyay是的,我知道这些CSS属性。问题是它们只适用于声明的固定值高度更改。我希望设置动画的容器div的高度为“自动”,并且正在其中添加div,导致其高度增加好吧,CSS动画在这里不起作用。要添加
元素
添加
中吗?@JohnDoe是
东西
变量,位于
$.get()
回调元素
?这里的问题是,您的“添加”函数在将元素添加到主页面后选择类为“stuff”的元素,因此此函数只工作一次。第二次,“添加”函数还将选择第一批,并为两批赋予新类,等等。这里的问题是您的“添加”函数在将类“stuff”添加到主页面后选择元素,因此此函数只工作一次。第二次,“添加”函数还将选择第一批,并为两批提供新类,等等。