要素のIDを取得する

Question

アクティブなタブのIDを取得したかったのです。私のコードは動作していません。あなたがアクティブである李を選択していないとあなたが引用符が欠落している

//if it's the second tab, refresh it 
 
var liID = $('#menu').hasClass('active').attr(id); 
 
console.log(liID);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="nav nav-tabs" role="tablist" id="menu"> 
 
    <li role="presentation" class="active"> 
 
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container"> 
 
     <span class="round-tab"> 
 
           <i class="fa fa-archive"></i> 
 
          </span> 
 
    </a> 
 
    </li> 
 
    <li role="presentation" class="disabled"> 
 
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters"> 
 
     <span class="round-tab"> 
 
           <i class="glyphicon glyphicon-pencil"></i> 
 
          </span> 
 
    </a> 
 
    </li> 
 
    <li role="presentation" class="disabled"> 
 
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results"> 
 
     <span class="round-tab"> 
 
           <i class="glyphicon glyphicon-ok"></i> 
 
          </span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 1

助けます。あなたは "menu"要素がアクティブで、その値を読んでいるかどうかをチェックしています。

$('#menu').find('.active').attr('id') 

または

$('#menu .active').attr('id') 

Answer 2

idは、それ以外の場合は、あなたが宣言されていない変数、であると考えています、引用符で囲む必要があります。 、ブール値ではなく、クラスを持つ要素を返すので、戻り値に.attr()を呼び出すと失敗します.hasClass()ので

次に、IDを取得するために、あなたの試みは間違っています。

最後に、active要素には、とにかくidが含まれていません。ここで

が修正バージョンです：

//if it's the second tab, refresh it 
 
if($('#menu li').hasClass('active')){ 
 
    var liID = $('#menu li.active').attr("id"); 
 
    console.log(liID); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="nav nav-tabs" role="tablist" id="menu"> 
 
    <li role="presentation" class="active" id="HELLO"> 
 
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container"> 
 
     <span class="round-tab"><i class="fa fa-archive"></i></span> 
 
    </a> 
 
    </li> 
 
    <li role="presentation" class="disabled"> 
 
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters"> 
 
     <span class="round-tab"><i class="glyphicon glyphicon-pencil"></i></span> 
 
    </a> 
 
    </li> 
 
    <li role="presentation" class="disabled"> 
 
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results"> 
 
     <span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span> 
 
    </a> 
 
    </li> 
 
</ul>

しかし、実際には、これはさらに簡単でなければなりません：

// Just query for the active element and then use it: 
 
console.log($('#menu li.active').attr("id"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="nav nav-tabs" role="tablist" id="menu"> 
 
    <li role="presentation" class="active" id="HELLO"> 
 
    <a href="#container" data-toggle="tab" aria-controls="step1" role="tab" title="Container"> 
 
     <span class="round-tab"><i class="fa fa-archive"></i></span> 
 
    </a> 
 
    </li> 
 
    <li role="presentation" class="disabled"> 
 
    <a href="#parameters" data-toggle="tab" aria-controls="step2" role="tab" title="Parameters"> 
 
     <span class="round-tab"><i class="glyphicon glyphicon-pencil"></i></span> 
 
    </a> 
 
    </li> 
 
    <li role="presentation" class="disabled"> 
 
    <a href="#results" data-toggle="tab" aria-controls="step3" role="tab" title="Results"> 
 
     <span class="round-tab"><i class="glyphicon glyphicon-ok"></i></span> 
 
    </a> 
 
    </li> 
 
</ul>

Answer 3

ラップIDウィットh引用。 hasClassはブール値を返します。したがって

var liID = $('#menu li.active').attr('id'); 

はliIDのidに親「menu」を持ち、classがactiveの場合はそれを設定します。