代码之家 › 专栏 › 技术社区 › Daryl

为什么这个jquery不工作?

children css jquery

Daryl · 技术社区 · 15 年前

        if($('.navigation ul li ul').children().length === 1) {
            $('.navigation ul li ul li a').css({opacity:0.5});
        }
        else {
            $('.navigation ul li ul li:first-child a').addClass('first');
            $('.navigation ul li ul li:last-child a').addClass('last');
        }

基本上我想要,所以如果导航有一个 <li> 如果它有超过1个 <li> 在无序列表中。

HTML示例:

<nav id="nav" class="navigation"><!--Start Navigation-->          
    <ul> 
        <li><a href="#">Sample Linkk</a>
            <ul>
                <li><a href="#">1 DropDown Item</a></li>
            </ul>
        </li>
        <li><a href="#">Sample Link 2</a>
            <ul>
                <li><a href="#">2 DropDown Items</a></li>
                <li><a href="#">2 DropDown Items</a></li>
            </ul>
        </li>
    </ul>
 </nav>

6 回复 | 直到 15 年前

Mikael Eliasson 15 年前

$('.navigation ul li ul').each(function(){
   if($(this).children().length === 1){
      $(this).find('a').css({opacity:0.5});
   }else{
      $('li:first a', $(this)).addClass('first');
      $('li:last a', $(this)).addClass('last');
   }
});

没有测试,但我想会有用的

Salman Paracha 15 年前

如果您在代码中放置以下警报,它将显示它找到三个子项

alert($('.navigation ul li ul').children().length)

并且,基于您指定的选择器,这是正确的。您基本上是要求jQuery查找与该条件匹配的所有节点,并且有两个节点与该条件匹配(总共有三个子节点)

每个函数都会起作用,因为对于每个“.navigation ul li ul”函数,它会查看其子函数,此时您将完全控制有多少子函数,并完成其余的工作

$('.navigation ul li ul').each(function(){
  if($(this).children().length === 1){
    $(this).find('a').css({opacity:0.5});
  }else{
    $('li:first a', $(this)).addClass('first');
    $('li:last a', $(this)).addClass('last');
  }
 });

Alex C 15 年前

你错过了一个 .each ?

 $('.navigation ul li ul').each(function(){
      if ($(this).children().length == 1) {
          // do A
      } else {
          // do B
      }
 });

Lucas Moeskops 15 年前

你现在说的是导航有一个ul和一个li,ul正好有一个孩子,而不是你下面说的你想要的。我也认为==足够了。。

它在逻辑上不起作用:

你是说:

如果至少有一个 $('.navigation ul li ul') 存在正好有1个孩子,然后为所有 $('.navigation ul li ul li a') 元素(因此不仅是那些属于if条件中匹配项的元素)做不透明度的事情。

在应用操作之前,必须先分离元素。

brad 15 年前

看看当你做这样的事情时会发生什么:

console.log( $("#nav ul li ul").children() );

您将所有li集中到一个jQuery对象中。我不认为这不是你想要的。

试试像这样的 this

FatherStorm 15 年前

您需要迭代可能的匹配项,否则将对所有匹配项应用一次。

$('.navigation ul li').each(function(){


if($(this).children('ul').children('li').length === 1) {
            $(this).children('ul').children('li').children('a').css({opacity:0.5});
        }
        else {
            $(this).children('ul').children('li:first-child').children('a').addClass('first');
            $(this).children('ul').children('li:last-child').children(
              'a').addClass('last');
        }
});

是的,很乱,但我今天感觉不舒服