クリックすると、同じdivのli要素が表示されますか？ JQuery/JavaScript

Question

私はdiv内に3つの異なるulグループを持っています。ユーザーがli要素をクリックすると、idとdataの属性値を取得したいと考えています。ここに私のHTMLは次のとおりです。

 <div class="myMenu"> 
     <div id="groupList1"> 
      <fieldset> 
       <legend>Group 1</legend> 
       <ul> 
        <li> 
         <span id="gr1" data-code="GRVAL1">Test 1</span> 
        </li> 
        <li> 
         <span id="gr2" data-code="GRVAL2">Test 2</span> 
        </li> 
       </ul> 
      </fieldset> 
     </div> 
     <div id="groupList2"> 
      <fieldset> 
       <legend>Group 2</legend> 
       <ul> 
        <li> 
         <span id="gr3" data-code="GRVAL3">Test 3</span> 
        </li> 
        <li> 
         <span id="gr4" data-code="GRVAL4">Test 4</span> 
        </li> 
       </ul> 
      </fieldset> 
     </div> 
     <div id="groupList3"> 
      <fieldset> 
       <legend>Group 3</legend> 
       <ul> 
        <li> 
         <span id="gr5" data-code="GRVAL5">Test 5</span> 
        </li> 
       </ul> 
      </fieldset> 
     </div> 
    </div> 

私はこれを試してみましたが、私はIDまたはデータ属性値を取得できませんでした：

$('.myMenu ul li').on('click', function(){ 
    console.log($(this).prop('id')); 
}); 

誰がIDまたはデータ値を返す方法を知っていれば聞かせてください私は知っている。前もって感謝します。

Answer 1

クリック機能でイベントパラメータを渡した後、e.currentTargetを使用してドリルダウンして子要素IDを取得します。

$('.myMenu ul li').on('click', function(e){ 
 
    console.log($(e.currentTarget).children().attr('id')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="myMenu"> 
 
    <div id="groupList1"> 
 
    <fieldset> 
 
     <legend>Group 1</legend> 
 
     <ul> 
 
     <li> 
 
      <span id="gr1" data-code="GRVAL1">Test 1</span> 
 
     </li> 
 
     <li> 
 
      <span id="gr2" data-code="GRVAL2">Test 2</span> 
 
     </li> 
 
     </ul> 
 
    </fieldset> 
 
    </div> 
 
    <div id="groupList2"> 
 
    <fieldset> 
 
     <legend>Group 2</legend> 
 
     <ul> 
 
     <li> 
 
      <span id="gr3" data-code="GRVAL3">Test 3</span> 
 
     </li> 
 
     <li> 
 
      <span id="gr4" data-code="GRVAL4">Test 4</span> 
 
     </li> 
 
     </ul> 
 
    </fieldset> 
 
    </div> 
 
    <div id="groupList3"> 
 
    <fieldset> 
 
     <legend>Group 3</legend> 
 
     <ul> 
 
     <li> 
 
      <span id="gr5" data-code="GRVAL5">Test 5</span> 
 
     </li> 
 
     </ul> 
 
    </fieldset> 
 
    </div> 
 
</div>

Answer 2

IDをログに記録するため、以下の作品。データ属性を取得する場合は、.id行を.dataset.codeに置き換えてください。.myMenuクラスのスペルが間違っているので、最初に修正する必要があります。次に、あなたは里の範囲でデータを取得しようとしているので、私はそれにアクセスしました。

$('.myMenu ul li').on('click', function(){ 
    console.log($(this)[0].children[0].id); 
}); 

の作業ビン：

http://jsbin.com/yinitirawi/edit?html,js,output

Answer 3

たいが、その後、これを見属性

すべての「LIの属性値を取得するには、 "ID" と "データコード" を取得した場合正しい属性の値を取得するには、「span」タグも指定する必要があります。次のjqueryコードを使用します。

$(document).ready(function(){ 
    $('li').click(function(){ 
    var id = $(this).children().attr('id'); 
    var data = $(this).children().attr('data-code'); 
    }); 
}); 

を、あなたが好きな場所、その後idとdataを使用します。

$(function(){ 
     $('.myMenu ul li span').on('click',function(){ 
      console.log($(this).attr('id')+", "+$(this).attr('data-code')); 
     }); 
    }); 

Answer 4

あなたはこれを使用することができます。お使いのjQueryのセレクタで `.myMneu`のタイプミス以外

http://jsbin.com/lixodoyuha/edit?html,js,output