Jquery using：after selector

Question

私は現在メニューを作っています。メニューはエッジの周りに光がある奇妙な形なので、オーバーラップ上の不要な輝きを隠すために空白のブロックを上に置く必要があります。私はこれを使用して作成しています：メニューのliタグの後のセレクタとコードがうまくいきます。

私の問題は、表示属性を切り替えることで、メニュー項目の一部または全部に一度に適用できるだけですが、私が望むのは：afterセレクタを現在のリスト項目にのみ適用することです。

各リスト項目には一意のIDがありますが、jquery内の特定のリスト項目で：afterセレクタを使用する方法を考えることができません。

ご協力いただきありがとうございます。これが不明な場合は申し訳ありません。

リスト項目

#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; 
} 

ため

HTMLコード

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

CSS私はそれが

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

または多分

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

のようなものを置くのと同じくらい簡単だろうと思いました

しかし、これらは機能しません。

Answer 1

を試し、1 $を必要とします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; 
} 

は意図は左上隅の代わりに（中央）デフォルト値から10％で第2のDIVの三角形を置くことである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> 

の関連部分を以下。したがって、JQueryを使用して古いクラスを削除し、新しいカスタマイズされたクラスを頭に追加し、新しい:afterのCSSコードを新しいクラスに適用することができます。

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

Answer 2

idsが一意であることを確認してください。

ユーザーは、（例えばこれを見るあなたは:afterと:beforeを扱うとき、あなたは通常のみdata-contentプロパティに再発することにより、コンテンツ値を変更することができます

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

jsFiddle