Question

我是关于jquery的新手，所以如果这是一个对所有人抱歉的noob问题。

我有一个嵌套的类别树和html看起来像;

<ul class="product-cat-list">
    <li data-id="1287"><a href="#">PRODUCTS - 1 (MAIN CATEGORY) </a>
        <ul>
            <li data-id="1200"><a href="#">PRODUCTS - 1.1</a></li>
            <li data-id="1203"><a href="#">PRODUCTS - 1.2</a>
                <ul>
                    <li data-id="1204"><a href="#">PRODUCTS - 1.2.1</a></li>
                    <li data-id="1205"><a href="#">PRODUCTS - 1.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-id="1288"><a href="#">PRODUCTS - 2 (MAIN CATEGORY)</a>
        <ul>
            <li data-id="1300"><a href="#">PRODUCTS - 2.1</a></li>
            <li data-id="1303"><a href="#">PRODUCTS - 2.2</a>
                <ul>
                    <li data-id="1304"><a href="#">PRODUCTS - 2.2.1</a></li>
                    <li data-id="1305"><a href="#">PRODUCTS - 2.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

我使用PHP的$ _GET超级全局（$ _GET [＆＃39;类别＆＃39;]）获取类别ID。

如果我PRODUCTS - 2.2.2我的网址看起来像products.php?category=1305

问题：如何添加（例如。）active css类只有它的父ul？

所以结果必须看起来像;

<ul class="product-cat-list">
        <li data-id="1287"><a href="#">PRODUCTS - 1 (MAIN CATEGORY) </a>
            <ul>
                <li data-id="1200"><a href="#">PRODUCTS - 1.1</a></li>
                <li data-id="1203"><a href="#">PRODUCTS - 1.2</a>
                    <ul>
                        <li data-id="1204"><a href="#">PRODUCTS - 1.2.1</a></li>
                        <li data-id="1205"><a href="#">PRODUCTS - 1.2.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li data-id="1288"><a href="#">PRODUCTS - 2 (MAIN CATEGORY)</a>
            <ul class="active">
                <li data-id="1300"><a href="#">PRODUCTS - 2.1</a></li>
                <li data-id="1303"><a href="#">PRODUCTS - 2.2</a>
                    <ul class="active">
                        <li data-id="1304"><a href="#">PRODUCTS - 2.2.1</a></li>
                        <li data-id="1305"><a href="#">PRODUCTS - 2.2.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>
</ul>

我尝试像上面的正则表达式一样获取URL参数，但它确实有效。但是我无法在active上添加ul css类。

任何帮助都非常适合。

// Getting URL Parameter
    $.urlParam = function(name){
        var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
        return results[1] || 0;
    }
    // Products sidebar
    var dataid =  $('#product-cat-list > li').data('id');

    if( dataid == $.urlParam('category')){
        find($('#product-cat-list > ul').addClass('active'))
    };

Answer 1

选择li by data属性并使用parents()获取uls。

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

$( function() {
    var id = getParameterByName("category"); //1035;
    var li = $("li[data-id=" + id + "]");
    li.parents("ul").addClass("active");
});

如果要排除第一个ul，请使用not()

li.parents("ul").not(".product-cat-list").addClass("active");

Answer 2

<强> jsFiddle Demo

您可以使用基于data-id和parentsUntil的选择组合来执行此操作。

var dataid = 1305;//$.urlParam('category')
$('li[data-id='+dataid+']')//find elements with data-id equal to 1305
  .parentsUntil('.product-cat-list')//find element's parents prior to cat-list
  .find('ul')//only take the ul elements of the parents
  .addClass('active');//add class active to them

.active, .active a{
    color:red;
    text-decoration:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="product-cat-list">
    <li data-id="1287"><a href="#">PRODUCTS - 1 (MAIN CATEGORY) </a>
        <ul>
            <li data-id="1200"><a href="#">PRODUCTS - 1.1</a></li>
            <li data-id="1203"><a href="#">PRODUCTS - 1.2</a>
                <ul>
                    <li data-id="1204"><a href="#">PRODUCTS - 1.2.1</a></li>
                    <li data-id="1205"><a href="#">PRODUCTS - 1.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li data-id="1288"><a href="#">PRODUCTS - 2 (MAIN CATEGORY)</a>
        <ul>
            <li data-id="1300"><a href="#">PRODUCTS - 2.1</a></li>
            <li data-id="1303"><a href="#">PRODUCTS - 2.2</a>
                <ul>
                    <li data-id="1304"><a href="#">PRODUCTS - 2.2.1</a></li>
                    <li data-id="1305"><a href="#">PRODUCTS - 2.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Answer 3

试试这个：

var id = $.urlParam('category');
var active = $('[data-id=' + id + ']');

active.parents('ul:not(.product-cat-list)').addClass('active');

Answer 4

如果您只想要＃product-cat-list中的第一个UL，那么它应该是：

    if( dataid == $.urlParam('category')){
        $('#product-cat-list > ul:first).addClass('active');
    });

如果你想要每个LI中的第一个UL，那就是：

    if( dataid == $.urlParam('category')){
         $('li > ul:first).addClass('active');
    });

每个UL都是：

    if( dataid == $.urlParam('category')){
         $('li > ul).addClass('active');
    });

Jquery将css类添加到父<ul>元素</ul>

4 个答案: