jqueryのインクリメンタルZ-インデックス

Question

私はナビゲーションバーを持っており、私は常に現在のものを上に保つ必要があります。私はこのコードを思い付いたが、それは働いていない理由を私は知らない。

$(this).find('ul.sub_nav').css('z-index', function(index) { 
    return index++; 
}); 

私はクロームでそれを検査し、それが示しすべては関係なく、私はそれを試して何回<ul class="sub_nav" style="z-index: 0;">ではありません。

最初はz-indexであり、FYIです。 JSと

var zIndex = 1; 

$(document).ready(function() { 
    $('ul.top_nav > li').hover(function() { 
     zIndex++; 
     $(this).find('ul.sub_nav').css('z-index', zIndex); 
    }); 
}); 

はるかに簡単な解決策：私は解決何

---

。

Answer 1

私はあなたが各要素は、特定のセットの前の要素よりも大きいzIndex持っているしたい場合は、代わりにこれを行う必要があると考えています。

var subs = $(this).find('ul.sub_nav'); 
var index = subs.eq(0).css('z-index'); 
subs.gt(0).each(function() { 
    $(this).css('z-index', ++index); 
}); 

Answer 2

jqueryとjsを使用する代わりに、cssを使用してz-indexを設定するだけではどうでしょうか。また、あなたのZ-インデックスを使用している場合、要素の位置がrelativeに設定されていることを確認してください。

https://developer.mozilla.org/en/CSS/z-index

あなただけのCSSトライ設定できない場合：

$(this).find('ul.sub_nav').css('z-index', function(index, value) { 
    return value++; 
}); 

Answer 3

代わりのfunction(index)を、多分function(i, index)を試してみてください。

Answer 4

複数のナビゲーションバーを1つだけ表示させる場合は、すべてのナビバー.hide()と表示したい方の.show()にはるかに簡単です。

$('ul.sub_nav').not('.current').hide(); 
$('ul.sub_nav.current').show(); 

私たちは、あなたの実際のHTMLを含め、あなたが本当に達成しようとしているものについての詳細を語ってくれたならばお勧めするかについて、より正確である可能性があります。質問からのコード例で

、これはJS：

$(this).find('ul.sub_nav').css('z-index', function(index) { 
    return index++; 
}); 

を行い、各オブジェクトは.find（）jQueryオブジェクトに有する位置に対応する値にz屈折率が設定されています。したがって、$(this).find('ul.sub_nav')オブジェクトの最初のオブジェクトの場合、index引数はゼロになり、Z-インデックスは0に設定されます。セット内の2番目のオブジェクトの場合、1に設定されます。

特定のナビゲーションバーを1つだけ表示したい場合は、その1つを表示して他のものを非表示にしてください。これは、すべてのZ-indexを管理するよりも複雑ではありません。

また、これらのナビゲータはposition: absoluteですか？ position: static（デフォルト）の場合、z-indexは影響を受けません。

Answer 5

可変インデックスが増分されていません。それはあなたのループの範囲外です。私はこのようなものを試してみるだろう。

$(this).find('ul.sub_nav').each(function(i) { 
    $(this).css('z- index', i+1)}) 

Answer 6

また、単にちょうどあなたが例えばinital Zインデックスを設定して作る。..
$(yourelement).on("mouseover",function(){ $(this).css("z-index", "+=1") }); ような何かを行うことができますCSS

Answer 7

にこれも行うことができます：あなたはこの

$('.a_link_or_button').click(function(){ 
//get the current z-index value  
    var currentIndex=$('.current-index').text(); 
    $('.anotherDiv').show().css('z-index', currentIndex'); 

    //update the span which holds the current index with new z-index  

    var newCurrentIndex=parseInt(currentIndex)+1; 

    $('.curent-index').text(newCurrentIndex);  

希望を行うことができ、あなたのjQueryのクリックイベントに

<span class='current-index' style='display: none;'>1</span>  

その後、ヘッド部から任意の場所に離れてあなたのフッターにHTMLのスパンを追加したり、誰かを助ける。注：クリック機能の代わりに、ホバー機能を使用することができます