4

我在正文中有一个带有 id component-homepage 的主页。此页面在页脚、导航和另一个元素中有一些动画。这些元素在所有其他页面上具有相同的名称。

当元素位于#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
});

但这似乎不起作用。

4

2 回答 2

9

将代码包装在此：

if ( $('#component-homepage').length ) {
    // code
}

该.length方法返回 jQuery 对象中元素的数量，因此只要有多个具有此 ID 的元素，就会转换为 的布尔值true，从而运行代码。

来源

.length - jQuery API

于 2013-04-17T13:42:59.577 回答
2

您可以将上下文传递给您的 jQuery 选择器，它们只能在该范围内工作：

$('nav a', someDOMNode)

如果我正确地假设这就是你所追求的......

于 2013-04-17T13:43:54.647 回答