异步加载后如何将 class 添加到元素?
How can I add class to an element after it has loaded asynchronously?
我的问题是,当元素由 AJAX 加载并在成功回调期间附加到 DOM 时,addClass 方法执行得太快并且未显示转换。
$.ajax({
url : contentURL,
type : "GET",
dataType : "html",
success : function(response){
$content.append(response);
$activeSection = $('#'+href); // appended element
$activeSection.addClass("open"); // class is added before appending
}
});
没有 ajax 的问题:demo
也许您需要使用类似的东西:
setInterval(function(){
if($('#elementId').html() != null) {
$('#elementId').addClass('.class');
return;
}
console.log('Working...');
}, 1000);
这是 运行 直到元素存在并且 class 已被添加。 (抱歉英语不好)
您应该尝试同步 ajax 调用
即异步:false
参考以下 link 了解更多详情
http://api.jquery.com/jquery.ajax/
操纵 DOM 确实需要大量资源。在构建新元素时,它被赋予了 class 属性。我的解决方案是在操作 DOM 之前准备一个包装器元素,并仅在包装器上修改 class 属性。在创建新元素后,我立即插入了一个新的空包装器以进一步加载内容。
function addClass(el, classN) {
var hasClass = el.className.search(classN)+1;
if (hasClass) {
return true
} else {
el.className += el.className ? " "+classN : classN;
}
}
function removeClass(el, classN) {
var re = new RegExp("\s*"+classN, "ig");
el.className = el.className.replace(re, "");
if (el.className.length === 0) {
el.removeAttribute("class");
}
}
function dropping (el, classN, duration){
addClass(el, classN);
setTimeout(function(){
el.parentNode.removeChild(el);
state2 = null;
}, duration);
}
function opening(e) {
if (!open) {
open = true;
addClass(w1, "open");
addClass(w2, "open");
addClass(state0, "open");
state1 = state0;
state0 = conClear.cloneNode(true);
w3.appendChild(state0);
}
}
function closing(e) {
if (open) {
open = false;
removeClass(w1, "open");
removeClass(w2, "open");
dropping(state1, "drop", 1000);
state2 = state1;
state1 = null;
}
}
function paging(e){
if (open) {
dropping(state1, "drop", 1000);
state2 = state1;
addClass(state0, "open");
state1 = state0;
state0 = conClear.cloneNode(true);
w3.appendChild(state0);
}
}
var open = false;
var bO = document.getElementById("open");
var bC = document.getElementById("close");
var bP = document.getElementById("page");
var w1 = document.getElementById("wrapper1");
var w2 = document.getElementById("wrapper2");
var w3 = document.getElementById("wrapper3");
var con = w3.getElementsByClassName("content").item(0);
var state0 = con;
var state1 = null;
var state2 = null;
var conClear = con.cloneNode(true);
bO.addEventListener("click", opening, false);
bC.addEventListener("click", closing, false);
bP.addEventListener("click", paging, false);
我的问题是,当元素由 AJAX 加载并在成功回调期间附加到 DOM 时,addClass 方法执行得太快并且未显示转换。
$.ajax({
url : contentURL,
type : "GET",
dataType : "html",
success : function(response){
$content.append(response);
$activeSection = $('#'+href); // appended element
$activeSection.addClass("open"); // class is added before appending
}
});
没有 ajax 的问题:demo
也许您需要使用类似的东西:
setInterval(function(){
if($('#elementId').html() != null) {
$('#elementId').addClass('.class');
return;
}
console.log('Working...');
}, 1000);
这是 运行 直到元素存在并且 class 已被添加。 (抱歉英语不好)
您应该尝试同步 ajax 调用 即异步:false
参考以下 link 了解更多详情 http://api.jquery.com/jquery.ajax/
操纵 DOM 确实需要大量资源。在构建新元素时,它被赋予了 class 属性。我的解决方案是在操作 DOM 之前准备一个包装器元素,并仅在包装器上修改 class 属性。在创建新元素后,我立即插入了一个新的空包装器以进一步加载内容。
function addClass(el, classN) {
var hasClass = el.className.search(classN)+1;
if (hasClass) {
return true
} else {
el.className += el.className ? " "+classN : classN;
}
}
function removeClass(el, classN) {
var re = new RegExp("\s*"+classN, "ig");
el.className = el.className.replace(re, "");
if (el.className.length === 0) {
el.removeAttribute("class");
}
}
function dropping (el, classN, duration){
addClass(el, classN);
setTimeout(function(){
el.parentNode.removeChild(el);
state2 = null;
}, duration);
}
function opening(e) {
if (!open) {
open = true;
addClass(w1, "open");
addClass(w2, "open");
addClass(state0, "open");
state1 = state0;
state0 = conClear.cloneNode(true);
w3.appendChild(state0);
}
}
function closing(e) {
if (open) {
open = false;
removeClass(w1, "open");
removeClass(w2, "open");
dropping(state1, "drop", 1000);
state2 = state1;
state1 = null;
}
}
function paging(e){
if (open) {
dropping(state1, "drop", 1000);
state2 = state1;
addClass(state0, "open");
state1 = state0;
state0 = conClear.cloneNode(true);
w3.appendChild(state0);
}
}
var open = false;
var bO = document.getElementById("open");
var bC = document.getElementById("close");
var bP = document.getElementById("page");
var w1 = document.getElementById("wrapper1");
var w2 = document.getElementById("wrapper2");
var w3 = document.getElementById("wrapper3");
var con = w3.getElementsByClassName("content").item(0);
var state0 = con;
var state1 = null;
var state2 = null;
var conClear = con.cloneNode(true);
bO.addEventListener("click", opening, false);
bC.addEventListener("click", closing, false);
bP.addEventListener("click", paging, false);