jquery使用：选择器后

我目前正在制作一个菜单，并且因为菜单是一个带边缘辉光的oddshape，我需要在顶部放置一个空白块以在重叠上隐藏不需要的光晕。我在菜单的li标签中使用：after选择器来创建此代码，并执行代码工作正常。jquery使用：选择器后

然而，我的问题是，我只能通过切换显示属性来将它适用于一个或所有的菜单项，但我想要的是：after选择器仅适用于当前列表项。

每个列表项都有一个唯一的ID，但我似乎无法解决如何在jQuery中的特定列表项上使用：after选择器。

在此先感谢您的帮助。对不起，如果这不清楚。

HTML代码

<ul id="menu"> 
    <li id="0">link 1</li> 
<li id="1">link 2</li> 
<li id="2">link 3</li> 
</ul>

CSS列表项

#menu li{ 
float:left; 
margin:0 20px 0 0; 
height:87px; 
z-index:1; 
position:relative; 
background: #f8f8f8; 
cursor:pointer; 
border:1px solid #CCC; 
border-bottom:none; 
} 

#menu li:after{ 
display:none; 
content: ''; 
position: absolute; 
top: 0; 
bottom: -5px; 
left: 0; 
width: 291px; 
height:10px; 
margin-top:109px; 
background: #f8f8f8; 
}

我认为这将是为把像

$$('li[id="0"]:after').show();

也许

$$('li[id="1"]:after').css("display" : "block");

一样简单

但这些不起作用。

来源

2011-11-11 Phil

CSS有一个'：after'选择，但jQuery的不：http://api.jquery.com/category/selectors/ – Blazemonger

[您无法定位伪元素使用jQuery。]（http://stackoverflow.com/questions/5041494/manipulating-css-pseudo-elements-using-jquery） – BoltClock

Psuedo-elements不是DOM的一部分，所以jQuery无法搜索他们。 –

当你与:after和:before处理，你通常只能通过经常性的data-content属性更改的含量值（例如见本thread）！但是，您可以做更多的事情，例如您可以使用脏手段替换与:after和:before相关的CSS代码的方式。

我做的是去除与:after或:before，我需要改变，那么我在文档中创建一个新的类，我把它应用到目标元素（一个或多个）相关联的类。

我会用一个很好的CSS3三角形做一个简单的例子。假设您有一个类arrow-up，并且您使用:after可以在div上打印一个带有css的三角形。这里有一个CSS。

.div{position:relative;display:block; width:100px; height:50px; border:1px solid black} 

.arrow-up:after { 
    content:""; 
    position:absolute; 
    top:-10px; 
    left:50%; 
    margin-left:-5px; 
width: 0; 
height: 0; 
border-left: 10px solid transparent; 
border-right: 10px solid transparent; 
border-bottom: 10px solid #333; 
}

这里如下相关一块HTML的

<div>My div with centered triangle on top</div> 
<div id="toBeMoved" class="arrow-up">My div with centered triangle moved a lot with JQuery</div>

的意图是从左上角，而不是缺省值（在中心）把第二div的三角形在10％。因此，我们可以使用JQuery删除旧类，将新的自定义类添加到头部，并将新类使用新的:after css代码应用于div。

var counter = 0; 

$.fn.moveTheArrow = function() { 

    $(this).removeClass('arrow-up'); 
    var modclass = 'arrow-up' + (counter++); 
    $("<style type='text/css'> ." + modclass + ":after{left:10%;content:'';position:absolute;top:-10px;margin-left:-5px;width: 0;height: 0;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #333}</style>").appendTo("head"); 
    $(this).addClass(modclass); 

});

请注意，我定义了一个全局计数器来寻址唯一的id生成器（当然你也可以按照其他方式）。

最后，使用JQuery调用目标div上的函数，例如，

$(function(){ 
    $('#toBeMoved').moveTheArrow(); 
});

这里有个工作JSFiddle

来源

2012-10-11 13:31:16 JeanValjean

确保您的ids是唯一的。

你只需要一个$，尝试

$('#myID').nextAll('li').show();

jsFiddle

来源

2011-11-11 14:19:05 Gabe

以数字开头的ID在HTML5中有效，但... –

够公平的，我会更新... – Gabe

jquery使用：选择器后

回答

相关问题