1

So I have a list like so;

<ul>
  <li>Sausage</li>
  <li>Egg</li>
  <li>Parsnip</li>
  <li>Sarsaparilla</li>
  <li>Burger</li>
  <li>Cilantro</li>
</ul>

I'd need to add a "cascading z-index" dynamically to a specific li, so that I could specify a li to be the top one and all other lis to be decreasingly behind it.

For example, if I had a jQuery click() event bound to a function that would dynamically calculate the z-indexes the way I want, and I clicked "Parsnip", the list would now look like so;

<ul>
  <li style="z-index: 2;">Sausage</li>
  <li style="z-index: 3;">Egg</li>
  <li style="z-index: 4;">Parsnip</li>
  <li style="z-index: 3;">Sarsaparilla</li>
  <li style="z-index: 2;">Burger</li>
  <li style="z-index: 1;">Cilantro</li>
</ul>

Clicking "Cilantro" would make the list look like this;

<ul>
  <li style="z-index: 1;">Sausage</li>
  <li style="z-index: 2;">Egg</li>
  <li style="z-index: 3;">Parsnip</li>
  <li style="z-index: 4;">Sarsaparilla</li>
  <li style="z-index: 5;">Burger</li>
  <li style="z-index: 6;">Cilantro</li>
</ul>

In other words, the clicked li would have the highest z-index necessary to bring to front (would need to be calculated, as the number of lis can be anything), its immediate siblings would have one lower, their siblings one lower yet, etc. etc.

How would I possibly achieve this? The list items don't necessarily need to be assigned the exact same z-index numbers as illustrated, as long as the visual effect of 'cascading' elements with the clicked being the highest is achieved.

4

1 に答える 1

3

どうですか

$('li').click(function(){
    var prev = $(this).prevAll();
    var next = $(this).nextAll();
    var count = prev.length;
    if (next.length > count){
        count = next.length;
    }
    $(this).css({zIndex: count+1});
    prev.each(setIndex);
    next.each(setIndex);
    function setIndex(i){
        $(this).css({zIndex: count-i})
    }
});​

http://jsfiddle.net/UaaNn/

于 2012-12-31T02:55:37.277 に答える