我有一个主页上有id组件主页的主页。此页面在页脚,导航和其他元素中有一些动画。这些元素在所有其他页面上具有相同的名称。
当元素在#component-homepage中时,我想执行jQuery代码(js文件将包含更多,然后只包含此代码)。
// This could should be on all the pages
$("nav li:last-child").addClass('last-child');
// This code should only be used when the id #component-homepage is in the body
// Homepage navigatie fadeIn + contentblok animatie
$('#content_home').hide();
$('nav').hide().fadeIn(1200, function(){
var result = $("#content_home").outerHeight();
$('#content_home_container').css({"margin-top": -Math.abs(result), "height": (result)});
$('#content_home').css({"margin-top": (result),"display":"block"}).animate({marginTop: '0px'},1000);
});
// Homepage navigatie animatie + url click event
$('nav a').click(function(event){
event.preventDefault();
var href = this.href;
$('nav').animate({
marginTop: '-635px'},
1000,
function(){
window.location = href;
});
$('footer').fadeOut(200);
});
我尝试将代码包装成:
$('#component-homepage').ready(function(){
// code
});
但它似乎不起作用。
答案 0 :(得分:9)
将代码包装在此:
if ( $('#component-homepage').length ) {
// code
}
.length
方法返回jQuery对象中元素的数量,因此只要有多个具有此ID的元素,这将转换为布尔值true
,从而运行代码。
<强>来源(S)强>
答案 1 :(得分:2)
您可以将上下文传递给jQuery选择器,它们只能在该范围内工作:
$('nav a', someDOMNode)
如果我认为那就是你所追求的......