得到不活跃的nav-pill的id

Question

我的网页上有一个标记（问题简化）

[Activity(Label = "TestOnCreate", MainLauncher = true, Icon = "@drawable/icon", ConfigurationChanges=Android.Content.PM.ConfigChanges.Orientation | Android.Content.PM.ConfigChanges.ScreenSize)]
public class MainActivity : Activity
{
   ~~~   
}

我试图获取 .tab-pane的ID：not（.active）。要在点击事件中实现此目的，我有以下代码

<div>
    <ul class="nav nav-pills nav-justified">
        <li class="active">
            <a href="#first" data-toggle="tab">One</a>
        </li>
        <li>
            <a href="#second" data-toggle="tab">second</a>
        </li>
        <li>
            <a href="#third" data-toggle="tab">third</a>
        </li>
    </ul>
</div>
<div class="tab-content">
    <div class="tab-pane active" id="first"></div>
    <div class="tab-pane" id="second"></div>
    <div class="tab-pane" id="third"></div>
</div>

我不断获得var notActivePane = $(".tab-pane:not(.active)").find(".input-validation-error").closest('.tab-pane:not(.active)').get(0).id;

这是页面的实际最终标记

Answer 1

您可以使用此

if (!$(this).hasClass("active")) 
{ 
    //do your job
}

Answer 2

您可以使用.parents()：

console.log($('.input-validation-error').parents('.tab-pane'));

$(function() {
  //This works for cases when only one tab has inputs with .input-validation-error
  console.log($('.input-validation-error').parents('.tab-pane:not(.active)').attr('id'));

  //To get all tabs with errors that dont have class active
  var tabsWithErrors = $('.input-validation-error').parents('.tab-pane:not(.active)');
  tabsWithErrors.each(function(index, element) {
    console.log($(element).attr('id'));
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div>
  <ul class="nav nav-pills nav-justified">
    <li class="active">
      <a href="#first" data-toggle="tab">One</a>
    </li>
    <li>
      <a href="#second" data-toggle="tab">second</a>
    </li>
    <li>
      <a href="#third" data-toggle="tab">third</a>
    </li>
  </ul>
</div>
<div class="tab-content">
  <div class="tab-pane active" id="first">
    <div>
      <div>
        <input class="form-control input-validation-error" data-val="true" data-val-required="The Ink Reference Code field is required." id="InkReferenceCode" name="InkReferenceCode" type="text" value="">
      </div>
    </div>
  </div>
  <div class="tab-pane" id="second">
    <div>
      <div>
        <input class="form-control input-validation-error" data-val="true" data-val-required="The Ink Manufacturer field is required." id="InkManufacturer" name="InkManufacturer" type="text" value="">
        <input class="form-control input-validation-error" data-val="true" data-val-required="The Ink Reference Code field is required." id="InkReferenceCode" name="InkReferenceCode" type="text" value=""></div>
    </div>
  </div>
  <div class="tab-pane" id="third">
    <div>
      <div>
        <input class="form-control input-validation-error" data-val="true" data-val-required="The Ink Manufacturer field is required." id="InkManufacturer" name="InkManufacturer" type="text" value="">
      </div>
    </div>
  </div>
</div>