Question

我正在尝试显示一个在我的页面上包含导航栏的表（或ul），但只显示将包含html上存在的名为div的jquery的选项卡。

基本上，它是一个包含所有div的单个html文档，jquery隐藏所有div，但第一个，导航栏将允许浏览每个div。现在我正在尝试使其易于用于我的客户端，以便菜单项只有在它的div也存在时才存在。我已经完成了大部分工作，唯一的事情就是知道div是否存在。

我试过用这个：

if(document.getElementById("page1")) {
document.write("<b>Good morning</b>");}
else 
{
document.write("<b>Bad morning </b>");
}

当我将上面的代码放在div page1中时，它返回true。有没有办法从页面顶部而不是div内进行？

谢谢！

更新

正如许多人所说，我使用了以下内容：

$j(document).ready(function(){
    //Hide the sections we don't need right away
    $j("#page2").hide();
    $j("#page3").hide();
    $j("#page4").hide();
    if ($j('#page1').length > 0) {
var page = 'Excellent Morning'   ;
}
});

然后当我尝试使用时：

document.write(page);

它显示以下内容： [object HTMLBodyElement]

Answer 1

为什么不使用jQuery，因为你已经？

if ($('#page1').length > 0) {
    // do stuff...
}

编辑：正如davin指出的那样，应该在渲染DOM之后评估您的代码。您可以将其置于$(document).ready电话：

中

$(document.ready(function() {
    if ($('#page1').length > 0) {
        // do stuff...
    }
});

编辑2 ：根据OP的编辑，更好的解决方案是添加占位符元素并设置其内容（如FishBasketGordo建议）。一个例子：

$(document.ready(function() {
    //Hide the sections we don't need right away
    $("#page2, #page3, #page4").hide();
    if ($('#page1').length) {
        $('#myPlaceHolder').html('<b>Good Morning</b>');
    }
    else
    {
        $('#myPlaceHolder').html('<b>Bad Morning</b>');
    }
});

文件中的其他地方......

<span id="myPlaceHolder"></span>

Answer 2

如果将其放在页面顶部，则代码运行时page1 div不存在。如果您使用的是jQuery，place the code in a $(document).ready event。然后，您可以将其放在标记内的所需位置。这是一个例子：

$(document).ready(function() {
    if (document.getElementById("page1")) {
        document.write("<b>Good morning</b>");
    } else {
        document.write("<b>Bad morning </b>");
    }   
});

虽然我不是做document.write，而是考虑使用占位符span或div，并将其设置为innerHTML属性（or use jQuery's html method）。我也会使用CSS作为我的风格而不是<b>标签，但这完全是另一回事。

Answer 3

您可以使用

if ($(selector).length > 0) {
    // element exists
}

或者您可以查看此帖子以获得更优雅的解决方案 Is there an "exists" function for jQuery?

如果div存在，Javascript显示html

3 个答案: