javascript - 如何使用map获取所有子菜单数据或属性？

Question

当用户单击主菜单项时，我试图将子菜单的属性cat_id放入数组中。

这是菜单 html:

<div class="CatBar">
    <ul>
        <li><a data-category-type="main" class="category" cat_name="DEPARTMENT STORES" cat_id="1" href="#cat01">DEPARTMENT STORES</a></li>
        <li><a data-category-type="main" class="category" cat_name="CONVENIENCE & SERVICES" cat_id="2" href="#cat01">CONVENIENCE & SERVICES</a>
            <ul class="submenu">
                <li><a class="category" cat_name="Telecome" cat_id="7" href="#cat01">Telecome</a></li>
                <li><a class="category" cat_name="MOBILES" cat_id="9" href="#cat01">MOBILES</a></li>
                <li><a class="category" cat_name="HYPER MARKET" cat_id="10" href="#cat01">HYPER MARKET</a></li>
            </ul>
        </li>
        <li><a data-category-type="main" class="category" cat_name="FASHION" cat_id="3" href="#cat01">FASHION</a>
            <ul class="submenu">
                <li><a class="category" cat_name="Women" cat_id="11" href="#cat01">Women</a></li>
                <li><a class="category" cat_name="Men" cat_id="12" href="#cat01">Men</a></li>
                <li><a class="category" cat_name="Kids" cat_id="13" href="#cat01">Kids</a></li>
                <li><a class="category" cat_name="SHOES & BAGS" cat_id="14" href="#cat01">SHOES & BAGS</a></li>
                <li><a class="category" cat_name="WATCHES & ACCESSORIES" cat_id="15" href="#cat01">WATCHES & ACCESSORIES</a></li>
                <li><a class="category" cat_name="BEAUTY & OPTICS" cat_id="16" href="#cat01">BEAUTY & OPTICS</a></li>
                <li><a class="category" cat_name="Lifestyle & Sport" cat_id="20" href="#cat01">Lifestyle & Sport</a></li>
                <li><a class="category" cat_name="Unisex" cat_id="21" href="#cat01">Unisex</a></li>
            </ul>
        </li>
        <li><a data-category-type="main" class="category" cat_name="DINING & CAFES" cat_id="4" href="#cat01">DINING & CAFES</a>
            <ul class="submenu">
                <li><a class="category" cat_name="FOOD COURT" cat_id="17" href="#cat01">FOOD COURT</a></li>
                <li><a class="category" cat_name="CASUAL DINING" cat_id="18" href="#cat01">CASUAL DINING</a></li>
                <li><a class="category" cat_name="CAFES & ICE CREAM" cat_id="19" href="#cat01">CAFES & ICE CREAM</a></li>
            </ul>
        </li>
        <li><a data-category-type="main" class="category" cat_name="ENTERTAINMENT" cat_id="5" href="#cat01">ENTERTAINMENT</a></li>
        <li><a data-category-type="main" class="category" cat_name="Home & Furniture" cat_id="6" href="#cat01">Home & Furniture</a></li>
    </ul>
</div>  

这是 jQuery:

$(".category").click(function() {
        main_cat = false;
        if (typeof $(this).data('category-type') !== 'undefined')
        {
            main_cat = true;
            arr = $(this).parent().children("ul li a").map(function(n) {
                return n;
            }).toArray(); 
        }
    return;
    });

Answer 1

您需要使用find，而不是children。 map 的第一个参数也是一个索引，第二个参数是您要查找的元素:

arr = $(this).parent().find("ul li a").map(function(i, el) {
   return $(el).attr('cat_id');