Question

好吧，所以我最近从客户那里收到了这个项目。他们需要一个离线和在线网站，可以通过USB驱动器加载到ipads或没有互联网连接的远程源。所以所有文件都必须是“.html”扩展名。为了使维护和更改更容易，我使用javascript将全局内容部分加载到页面中，特别是导航。我在尝试找到我添加的新元素时遇到了麻烦，这里是nav.tpl的一个示例，我将通过ajax加载到dom中：

                    <li><a href="index.html" class="nav-grey"><span class="spacer"></span>HOME<span class="spacer"></span></a></li>
                    <li class="dropdown">
                        <a href="unmatched_simplicity.html" class="nav-red">unmatched <br/> SIMPLICITY</a>
                        <ul class="dropdown-menu">
                            <li><a href="unmatched_simplicity-easy_to_use.html">Easy to Use</a></li>
                            <li><a href="unmatched_simplicity-cashier_workstation.html">Cashier Workstation Screen</a></li>
                            <li class="dropdown-submenu">
                                <a tabindex="-1" href="unmatched_simplicity-fuel.html">Fuel</a>
                                <ul class="dropdown-menu">
                                    <li><a tabindex="-1" href="unmatched_simplicity-fuel-authorize_pump.html">Authorize Pump</a></li>
                                    <li><a tabindex="-1" href="unmatched_simplicity-fuel-all_stop.html">All Stop</a></li>

这是javascript：

$。get（“lib / nav.tpl”，function（navItems）{ $（“。nav”）。html（navItems）; }）;

现在我有一个我用于组织目的以及面包屑的命名约定，现在我正在尝试使用它来检测当前页面所在的导航项目。基本上每个页面级别用“ - ”分隔。我的目标是使用url找到href =到当前页面的锚点，然后转到它的父“li”并添加活动类“.active”。这就是我所拥有的：

( function( window ) {

        var location = locationTiers = '';

        location = window.location.pathname;
        location = location.substr( location.indexOf('/') + 1 ); 
        location = location.replace('.html', '');

        locationTiers = location.split('-');

console.log( $( 'a[href="'+ locationTiers[0] +'.html"]' ).parent('li') );

    }) ( window );

这很奇怪，因为我可以找到锚点，如果我删除“.parent（'li'）”，但是使用“.parent（'li'）”它会返回空。似乎如果找不到“li”，它将无法找到“a”。我知道.on（）替换为live但这主要用于检测事件。

我希望我能做到这样的事情：

$('body','a[href="'+ locationTiers[0] +'.html"]').parent('li')

与.on live方法类似，但这也不起作用。如果有人可以帮我弄清楚如何找到这个动态添加的项目，我们将不胜感激！

由于

Answer 1

由于导航项是由ajax请求加载的，因此您需要将位置代码移动到加载导航项的成功处理程序

$.get("lib/nav.tpl", function (navItems) {
    $(".nav").html(navItems);

    var location = locationTiers = '';

    location = window.location.pathname;
    location = location.substr(location.indexOf('/') + 1);
    location = location.replace('.html', '');

    locationTiers = location.split('-');

    console.log($('a[href="' + locationTiers[0] + '.html"]').parent('li'));

});

Answer 2

试试这个

( function( window ) {

    var location = locationTiers = '';

    location = window.location.pathname;
    location = location.substr( location.indexOf('/') + 1 ); 
    location = location.replace('.html', '');

    locationTiers = location.split('-');
    var subject = $('a[href="'+ locationTiers[0] +'.html"]');
    var parent = subject.parent();
    console.log({'is_li':parent.is('li'),'parent':parent});

}) ( window );

它应该返回一个“is_li”为true或false的对象，如果为true，那么第二部分应该有一个jQuery li对象。

有以下原因无效：

$('body','a[href="'+ locationTiers[0] +'.html"]').parent('li');

jQuery关于选择器$（'body'，'{this guy}'）的第二个参数实际上是你可以在其中提供XML / HTML字符串/对象并在其中搜索“body”（或者你的选择器）它的。

您应该提供更多信息，查看LI的目的是什么，以便在点击时将其标记为活动状态？或者只是在内容被拉入或者您想要选择默认菜单项时？

无论如何这应该是一个相当容易的解决方案。让我们发布。

在页面加载后使用jQuery收集动态添加的dom元素

2 个答案: