jquery - 获取 ul 的索引

Question

我的页面上有两个Ul 标签。这是我的代码

HTML:

<div id="accordion">
   <h3>Funeral</h3>
   <div>
    <ul>
      <li><input type="radio" name="rbPlanname" class="rbPlanname" /> Funeral Plan 1</li>
      <li><input type="radio" name="rbPlanname" class="rbPlanname" /> Funeral Plan 2</li>
      <li><input type="radio" name="rbPlanname" class="rbPlanname" /> Funeral Plan 3</li>
    </ul>
   </div>
   <h3>Disability</h3>
   <div>
    <ul>
      <li><input type="radio" name="rbPlanname" class="rbPlanname" /> Disability Plan 1</li>
      <li><input type="radio" name="rbPlanname" class="rbPlanname" /> Disability Plan 2</li>
      <li><input type="radio" name="rbPlanname" class="rbPlanname" /> Disability Plan 3</li>
     </ul>
   </div>
 </div>
 <table width="100%" style="margin-top:26px"> 

JS:

 var planName;
 $('#btnNextClaim').on('click', function () {
   $('.rbPlanname').each(function () {
       if ($(this).is(':checked')) {
         planName = $(this).closest('li').text();
         alert($(this).closest('ul').index());
       }
   });
 });

我想，当用户点击下一步按钮时，然后我找到哪个单选按钮被选中，据此，我想找到 ul 的索引。假设我选中了第一个 ul 的单选按钮，那么它应该返回 0。这是我的 fiddle

JsFiddle

Answer 1

试试这段代码:

$('#btnNextClaim').on('click', function () {
         $('.rbPlanname').each(function () {
         if ($(this).is(':checked')) {
             planName = $(this).closest('li').text();
             var $ul=$(this).closest('ul');
             alert($('ul').index($ul));
         }
     });
});

DEMO

编辑缓存 $(this):

如果在我们的代码中频繁使用，我们应该缓存 DOM 元素:

$('#btnNextClaim').on('click', function () {
    $('.rbPlanname').each(function () {
        var $this=$(this);
        if ($this.is(':checked')) {
            planName = $this.closest('li').text();
            var $ul=$this.closest('ul');
            alert($('ul').index($ul));
        }
    });
});