jquery - 使用 ul 和 li 以相反的顺序进行 Jquery

Question

我可以在 DIV 元素中获取每个 ul 和 li 的 ID，以下是我的代码

脚本 ：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function next_click()
{
alert("next");
var toHighlight = jQuery('.current').next().length > 0 ? jQuery('.current').next() : jQuery('#men_shirt li').first();
jQuery('.current').removeClass('current');
toHighlight.addClass('current');
//var a=$('.current').next().length > 0 ? $('.current').next().attr('id') : $('#men_shirt li').first().attr('id');
//var b=$('.current').next().length > 0 ? $('#men_shirt li').next().attr("id"): $('#men_shirt li').first().attr("id");
//alert(a);
//  alert("b"+b);
//var iid=jQuery('ul #men_shirt li.current').attr('id');
$('#men_shirt ul li').each(function(i)
{
   var iid=$(this).attr('id'); // This is your rel value
   alert("sdfsdf"+iid);
});

var a=jQuery('li').hasClass('current');
alert(a);

if(a=='style')
{
set_menuselected('Style');
}
} 

</script>

网页：

<div class="menu homecurrent" id="men_shirt">
  <ul>
    <li class="current" id="stoffcombo549"  onClick="showFabrics(549)"  ><a id="tab1" onClick="set_menuselected('Fabric');"><b>Fabric</b></a>
      <div class="combotext" >Aix-en-Provence</div>
    </li>


    <li id="style" class=""> <a id="tab2" text="Very comfortabel fit for maximum moving freedom." title="Loose fit" title1="thumb2/image100.jpg" onClick="set_menuselected('Style');displayThumb(this,jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 500)"><b>Style</b></a>
      <ul>
        <li   style="z-index:79;" id="opt-500" text="Very comfortabel fit for maximum moving freedom." title="Loose fit" title1="thumb2/image100.jpg" onClick="displayThumb(this,jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 500)"  > <a onClick="set_sub_menuselected('Fit');">Fit</a>
          <div class="combotext" id="opt-500-combotext">Loose fit</div>
        </li >
        <li class="" style="z-index:78;" id="opt-503" text="Fastening not visible." title="Without placket" title1="thumb2/image119.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 503)"  > <a onClick="set_sub_menuselected('Fastening');">Fastening</a>
          <div class="combotext">Without placket</div>
        </li>
        <li class="" style="z-index:77;" id="opt-502" text="Long sleeve." title="Long sleeve" title1="thumb2/image128.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 502)" > <a onClick="set_sub_menuselected('Sleeve');">Sleeve</a>
          <div class="combotext">Long sleeve</div>
        </li>
        <li class="" style="z-index:76;" id="opt-515" text="The classical straight collar can be worn unbuttoned or with a tie. And it is a fine match for all kinds of ties." title="Kent classic" title1="thumb2/image105.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 515)" > <a onClick="set_sub_menuselected('Collar');">Collar</a>
          <div class="combotext">Kent classic</div>
        </li>
        <li class="" style="z-index:75;" id="opt-519" text="Single button cuff with an angled ending." title="Single button cuff angled" title1="thumb2/image114.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 519)" > <a onClick="set_sub_menuselected('Cuff');">Cuff</a>
          <div class="combotext">Single button cuff angled</div>
        </li>
        <li class="" style="z-index:73;" id="opt-504" text="The box pleat gives additional comfort at back." title="Box pleat" title1="thumb2/image124.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 504)" > <a onClick="set_sub_menuselected('Back');">Back</a>
          <div class="combotext">Box pleat</div>
        </li>
        <li class="" style="z-index:80;" id="opt-541" text="Classic low white button. Width: 18&quot;" title="Pearl low" title1="thumb2/new_button_01.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 541)" > <a onClick="set_sub_menuselected('Buttons');">Buttons</a>
          <div class="combotext">Pearl low</div>
        </li>
        <li class="" style="z-index:78;" id="opt-509" text="No additional allowance added to the cuffs." title="Normal (flat watch)" title1="thumb2/flat_watch.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 509)" > <a onClick="set_sub_menuselected('Cuff Width');">Cuff width</a>
          <div class="combotext">Normal (flat watch)</div>
        </li>
        <li class="" style="z-index:77;" id="opt-510" text="" title="No" title1="thumb2/" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 510)" > <a onClick="set_sub_menuselected('Pocket');">Pocket</a>
          <div class="combotext">No</div>
        </li>
      </ul>
    </li>
    <li id="embroidery" class=""><a id="tab3" text="Embroidery Options." title="Left waist" title1="thumb2/bilder_konfi_hemd_monoposition_taillerechts.jpg"  onClick="set_menuselected('Embroidery');displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 516)" ><b>Embroidery</b></a>
      <ul>
        <li id="embro_text" class="" onClick="set_submenu_embroidery('Text');"><a  onClick="showembroiderytext('other');">Enter Text</a> 

        </li>
        <li class="" style="z-index:79;" id="opt-516" text="" title="Left waist" title1="thumb2/bilder_konfi_hemd_monoposition_taillerechts.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 516)" > <a  OnClick="set_submenu_embroidery('Position');"> Position</a>
          <div class="combotext">Left waist</div>
        </li>
        <li class="" style="z-index:78;" id="opt-514" text="Italic font." title="Italic" title1="thumb2/image160.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 514)" > <a OnClick="set_submenu_embroidery('Font');"> Font</a>
          <div class="combotext">Arial</div>
        </li>
        <li class="" style="z-index:77;" id="opt-523" text="" title="beige" title1="thumb2/embroidery_thread.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 523)" > <a OnClick="set_submenu_embroidery('Thread Color');"> Thread Color</a>
          <div class="combotext">beige</div>
        </li>
      </ul>
    </li>
    <li id="contrast" class=""><a id="tab4" text="" title="no contrast" title1="thumb2/combo518.jpg" onClick="set_menuselected('Contrast');displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 517);"><b>Contrast</b></a>
      <ul>
        <li id="contrast collar" class="current_subp"><a OnClick="set_submenu_contrast('Contrast Collar');">Collar</a>
          <ul>
            <li id="stoffcombo508" onClick="showFabrics(508)" ><a title="Collar Step in" title1="thumb2/combo508.jpg" onMouseOver="showcollar('thumb2/combo508.jpg','','Collar Step in');">Collar Step in</a>
              <div class="combotext">Aix-en-Provence</div>
            </li>
            <li id="stoffcombo810" onClick="showFabrics(810)"><a title="Collar stand outside" title1="thumb2/combo810.jpg" onMouseOver="showcollar('thumb2/combo810.jpg','','Collar stand outside');">Collar stand outside</a>
              <div class="combotext">Aix-en-Provence</div>
            </li>
            <li id="stoffcombo527" onClick="showFabrics(527)"><a title="Collar outerside" title1="thumb2/combo527.jpg" onMouseOver="showcollar('thumb2/combo527.jpg','','Collar outerside');">Collar outerside</a>
              <div class="combotext">Aix-en-Provence</div>
            </li>
            <li id="stoffcombo811" onClick="showFabrics(811)"><a title="Collar down"  title1="thumb2/combo811.jpg" onMouseOver="showcollar('thumb2/combo811.jpg','','Collar down');">Collar down</a>
              <div class="combotext">Aix-en-Provence</div>
            </li>
          </ul>
        </li>
        <li id="contrast cuff" class="current_subp"><a OnClick="set_submenu_contrast('Contrast Cuff');">Cuff</a>
          <ul>
            <li id="stoffcombo506" onClick="showFabrics(506)"><a title="Cuff Interior" title1="thumb2/combo506.jpg" onMouseOver="showcollar('thumb2/combo506.jpg','','Cuff Interier');">Cuff Interior</a>
              <div class="combotext">Aix-en-Provence</div>
            </li>
            <li id="stoffcombo520" onClick="showFabrics(520)"><a title="Cuff Exterior" title1="thumb2/combo520.jpg" onMouseOver="showcollar('thumb2/combo520.jpg','','Cuff Exterier');">Cuff Exterior</a>
              <div class="combotext">Aix-en-Provence</div>
            </li>
          </ul>
        </li>


        <li class="" style="z-index:80;" id="opt-517" text="" title="no contrast" title1="thumb2/combo518.jpg" onClick="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 517);" onMouseOver="displayThumb(this, jQuery(this).attr('title1'), jQuery(this).attr('text'));showOptions(this, 517)"> <a OnClick="set_submenu_contrast('Button Hole');">Thread Color Button Hole</a>
          <div class="combotext">no contrast</div>
        </li>
      </ul>
    </li>
  </ul>
</div>
<button id="prev_option" class="btn btn-back css3Button buttons back type2 small">Previous</button>
<button id="next_option" class="btn btn-back css3Button buttons back type2 small" onClick="next_click();">Next</button>

单击下一步按钮时，我可以获取每个 ul 和 li ID，但我的问题是我需要在单击上一个按钮时以相反的顺序获取 ul 和 li id，这意味着单击上一个按钮时我需要获取在我的函数中获得的前一个 li 和当前 ul 的 ul 或 li 的 ID

Answer 1

试试看，

$($('#men_shirt ul li').get().reverse()).each(function(i)
{
   var iid=$(this).attr('id'); // This is your rel value
   alert("sdfsdf"+iid);
});

或使用核心脚本，例如，

for(var i=$('#men_shirt ul li').length;i>0;i--)// loop in reverse order
{
     li=$('#men_shirt ul li')[i];
     var iid=$(li).attr('id'); // This is your rel value
     alert("sdfsdf"+iid);
});

Answer 2

你需要做的只是使用reverse()方法而不是独奏each，像这样：

jQuery.fn.reverse = [].reverse;

上面这段代码用于声明reverse 函数。现在你可以像这样使用它：

$("#next_option").click(function(){

console.log("next");
var toHighlight = jQuery('.current').next().length > 0 ? jQuery('.current').next() : jQuery('#men_shirt li').first();
jQuery('.current').removeClass('current');
toHighlight.addClass('current');

$('#men_shirt ul li').reverse().each(function(i)
{
   var iid=$(this).attr('id'); // This is your rel value
    console.log("All IDS:"+iid);
});

var a=jQuery('li').hasClass('current');
console.log(a);

if(a=='style')
{
set_menuselected('Style');
}
}); 

在这里找到工作小提琴：http: //jsfiddle.net/4vNEB/