Question

美好的一天。

HTML：

<ul>
    <li class="sub"><a href="/katalog1/">catalog</a>
        <ul>
            <li class="dir"><a href="">subcatalog</a>               
                <ul>
                    <li><a href="">sublink</a></li>
                    <li><a href="">sublink</a></li>
                    <li><a href="">sublink</a></li>
                </ul>               
            </li>
            <li class="dir"><a href="">subcatalog</a></li>
            <li class="dir"><a href="">subcatalog</a></li>
        </ul>
    </li> 
    <li class="sub"><a href="">catalog</a></li>
    <li class="sub"><a href="">catalog</a></li>
    <li class="sub"><a href="">catalog</a></li>
    <li class="sub"><a href="">catalog</a></li>
</ul>

<style>

ul > li.sub:hover > ul{display:block;}
ul > li.sub:hover{
background: #fff url(../../images/arrow1.png) no-repeat 91% center;
border-bottom: 2px solid #e30613;
padding-right: 25px;
}
</style>

我使用脚本：

$('li.main_menu_top_li').has('ul').addClass('sub');

请告诉我如何在javascript上播放（仅限javascript）？

Answer 1

两种方式之一。

首先获取元素：

var d = document.getElementByClassName("li.main_menu_top_li");

然后：

if (d.firstChild) {
    // It has at least one
    d.className = d.className + " sub";
}

或hasChildNodes（）函数：

if (element.hasChildNodes()) {
    // It has at least one
    d.className = d.className + " sub";
}

Answer 2

假设您要将子类添加到其下嵌套了UL的LI：

普通JS

var li = document.querySelector('li.main_menu_top_li');
if (li.getElementsByTagName("ul").length>0) li.className+="sub"; 
 // or get the addClass/hasClass from http://snipplr.com/view/3561/

jQuery的：

var li = $('li.main_menu_top_li');
if (li.children('ul').length) li.addClass('sub');

如果要将类添加到LI内的任何UL，那么

var li = $('li.main_menu_top_li');
li.children('ul').each(function() {
  $(this).addClass('sub');
});

Answer 3

以下代码查看所有LI元素并检查它们是否具有UL元素。如果是这样，那个UL元素得到类'sub'。如果您希望该LI具有类“sub”，请取消注释代码的注释部分，然后删除每条注释行下面的行。

这是第一个jsfiddle：

//IE 10+ and all other major browsers
var el = document.getElementsByTagName('li');

var listItems = Array.prototype.slice.call(el);

listItems.forEach(function(el) {
    var childrenList = Array.prototype.slice.call(el.children);  

    childrenList.forEach(function(el) {
        if(el.tagName === 'UL') {
            //if(!el.parentNode.classList.contains('sub') {
            if(!el.classList.contains('sub')) {
                //el.parentNode.classList.add('sub')
                el.classList.add('sub');
            }
        }
    });
});

这是第二个jsfiddle：

//IE8+ and all other major browsers, I think
var el = document.getElementsByTagName('li');

var listItems = Array.prototype.slice.call(el);

listItems.forEach(function(el) {
    var childrenList = Array.prototype.slice.call(el.children);  

    childrenList.forEach(function(el) {
        if(el.tagName === 'UL') {
            //if(el.parentNode.className === '') {
            if(el.className === '') {
                //el.parentNode.className = 'sub'
                el.className = 'sub';
            } else {
                //el.parentNode.className += 'sub'
                el.className += ' sub';   
            }
        }
    });
});

如何在javascript中检查li元素是否具有内部ul？

3 个答案: