Q:

Unable to jQuery list item when passing with parent div in selector

I have a div which has a ul and list items in it.
<div class="col-md-2"><input id="jackSerachBox" class="form-control input-md m-t-sm" type="text" placeholder="Search for Jacks.."></div>
<div class="col-md-2">
    <ul class="nav nav-pills nav-stacked" id="jacksTab">
        <li role="presentation" class="active">
            <a data-toggle="tab" class="dd-handle">
                <input type="checkbox" id="JackcheckBox-3" name="selectedjacks" value="3">
                <label class="text-muted text-uppercase small">NEW40206  </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
            </a>
        </li>
        <li role="presentation" class="">
            <a data-toggle="tab" class="dd-handle">
                <input type="checkbox" id="JackcheckBox-6" name="selectedjacks" value="6">
                <label class="text-muted text-uppercase small">NewJack12  </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
            </a>
        </li>
        <li role="presentation" class="">
            <a data-toggle="tab" class="dd-handle">
                <input type="checkbox" id="JackcheckBox-4" name="selectedjacks" value="4">
                <label class="text-muted text-uppercase small">Jack12  </label> <span><i class="fa fa-hdd-o text-info small"></i></span>
            </a>
        </li>
    </ul>
</div>

I am trying to access it using :
 $('#jackSerachBox').on('keyup', function (e) {
     var input, filter, ul, li, a, i;

     // filter = input.val().toUpperCase();
     li = $('#jacksTab li');
     li.each(function (e) {
         a = $('a', $(e)).eq(0);
         console.log(a.html())
         //test.html(a.html())
     })
 })

But getting undefined. I did ask similar question , but that was answered with the context. To be fair , had marked that as answer and did not post follow ups on that.
To be more accurate this time here is the jsfiddle for same.

A:

Simply use this inside your .each instead of using a parameter :
If you don't want to use this, you need to edit your .each() parameters to .each(_, e), since the first parameter from the callback is the index of the element.
See the jQuery#each documentation

$('#jackSerachBox').on('keyup', function(e) {
  $('#jacksTab li').each(function() {
    console.log($('a', this).html())
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-2"><input id="jackSerachBox" class="form-control input-md m-t-sm" type="text" placeholder="Search for Jacks.."></div>
<div class="col-md-2">
  <ul class="nav nav-pills nav-stacked" id="jacksTab">
    <li role="presentation" class="active">
      <a data-toggle="tab" class="dd-handle">
        <input type="checkbox" id="JackcheckBox-3" name="selectedjacks" value="3">
        <label class="text-muted text-uppercase small">NEW40206  </label> <span><i class="fa fa-hdd-o text-info small"></i></span>

      </a>
    </li>
    <li role="presentation" class="">
      <a data-toggle="tab" class="dd-handle">
        <input type="checkbox" id="JackcheckBox-6" name="selectedjacks" value="6">
        <label class="text-muted text-uppercase small">NewJack12  </label> <span><i class="fa fa-hdd-o text-info small"></i></span>

      </a>
    </li>
    <li role="presentation" class="">
      <a data-toggle="tab" class="dd-handle">
        <input type="checkbox" id="JackcheckBox-4" name="selectedjacks" value="4">
        <label class="text-muted text-uppercase small">Jack12  </label> <span><i class="fa fa-hdd-o text-info small"></i></span>

      </a>
    </li>

  </ul>
</div>

