[英]How check in javascript that a li element has inner ul?
Good day. 美好的一天。
HTML: 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>
I use script: 我使用脚本:
$('li.main_menu_top_li').has('ul').addClass('sub');
Tell me please how make it on javascript (only javascript)? 请告诉我如何在javascript(仅限javascript)上制作它?
One of two ways. 两种方式之一。
first get the element: 首先获取元素:
var d = document.getElementByClassName("li.main_menu_top_li");
Then: 然后:
if (d.firstChild) {
// It has at least one
d.className = d.className + " sub";
}
or the hasChildNodes() function: 或hasChildNodes()函数:
if (element.hasChildNodes()) {
// It has at least one
d.className = d.className + " sub";
}
Assuming you want to add the sub class to the LI that has nested ULs under it: 假设您要将子类添加到在其下嵌套了UL的LI中:
Plain JS 普通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: jQuery的:
var li = $('li.main_menu_top_li');
if (li.children('ul').length) li.addClass('sub');
If you want to add the class to any UL that is inside an LI then 如果要将类添加到LI内的任何UL中,则
var li = $('li.main_menu_top_li');
li.children('ul').each(function() {
$(this).addClass('sub');
});
The following code looks at all LI elements and checks if they have a UL element. 以下代码查看所有LI元素,并检查它们是否具有UL元素。 If so, that UL element gets the class 'sub'. 如果是这样,则该UL元素获得“ sub”类。 If you want instead for that LI to have the class 'sub', un-comment the commented portions of code and then remove the line underneath each commented line. 如果您希望该LI拥有类“ sub”,请取消注释代码的注释部分,然后删除每条注释行下方的行。
Here's the first jsfiddle : 这是第一个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');
}
}
});
});
Here's the second jsfiddle : 这是第二个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';
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.