是否有一种方法可以根据类中的子元素的类来选择父元素?这个例子是与我有关的HTML输出的一个很好的菜单插件http://drupal.org。输出是这样呈现的:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

我的问题是,是否可以将样式应用到包含活动类的锚的列表项。显然,我更希望将列表项标记为活动,但我无法控制生成的代码。我可以使用javascript (JQuery弹簧想到)执行这类事情,但我想知道是否有一种方法来做到这一点使用CSS选择器。

为了明确起见,我想对列表项应用样式,而不是锚。


当前回答

很多人用jQuery parent来回答,但为了补充这个问题,我想分享一个简短的代码片段,它是我用来向导航中添加类的,这样我就可以为只有子菜单的li添加样式,而不是没有子菜单的li。

$("li ul").parent().addClass('has-sub');

其他回答

实际上我遇到了和原来海报上一样的问题。有一个简单的解决方案,只需使用.parent() jQuery选择器。我的问题是,我使用的是.parent而不是.parent()。我知道这是个愚蠢的错误。

绑定事件(在这种情况下,因为我的选项卡是在模式,我需要绑定他们与。live而不是一个基本的。点击。

$('#testTab1 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab1 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})
$('#testTab2 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab2 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})

这里是HTML..

<div id="tabView1" style="display:none;">
  <!-- start: the code for tabView 1 -->
  <div id="testTab1" style="width:1080px; height:640px; position:relative;">
    <h1 class="Bold_Gray_45px">Modal Header</h1>
    <div class="tabBleed"></div>
    <ul class="tabs">
      <li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-1">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
      <li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-2">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
    </ul>
  </div>
</div>

当然你可以重复这个模式,用更多的LI

我刚刚想到的另一个想法可能是一个纯CSS解决方案。将您的活动类显示为一个绝对定位的块,并设置其样式以覆盖父li。

a.active {
   position:absolute;
   display:block;
   width:100%;
   height:100%;
   top:0em;
   left:0em;
   background-color: whatever;
   border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
    position:relative;
}    

对于那些想使用javascript而不使用jquery的人…

选择父对象很简单。您需要某种类型的getElementsByClass函数,除非您可以让drupal插件为活动项分配一个ID而不是Class。我提供的函数是我从SO上的其他天才那里抢来的。它工作得很好,只是在调试时要记住,该函数总是返回一个节点数组,而不仅仅是单个节点。

active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
       if ( pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
   }
}
return classElements;
}

Selectors Level 4的初稿概述了显式设置选择器主题的方法。这将允许OP使用选择器$li > a.active对列表元素进行样式化

从确定选择器的主题:

例如,下面的选择器表示列表项LI是有序列表OL的唯一子元素: OL > LI:独生子女 但是下面这个表示一个有序列表OL,它有一个唯一的子元素,这个子元素是一个LI: $OL > LI:独生子女 这两个选择器所表示的结构是相同的,但选择器的主题却不同。

编辑:考虑到规范草案是多么的“草案”,最好通过检查CSSWG在选择器级别4上的页面来密切关注这一点。

这次又迟到了,但是值得的是,使用jQuery可以更简洁一点。在我的例子中,我需要为child <li>中包含的<span>标记找到<ul>父标记。jQuery有:has选择器,所以可以通过它包含的子元素来识别父元素(根据@Afrowave的评论更新,参考:https://api.jquery.com/has-selector/):)

$("ul").has("#someId")

将选择带有id为someId的子元素的ul元素。或者要回答最初的问题,以下内容应该可以达到目的(未经测试):

$("li").has(".active")

你可以使用has():

li:has(a:active) {
  /* ... */
}

不幸的是,CSS没有办法做到这一点。

用JavaScript实现并不难:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.