check if target element is first element in class

Question

I need to check if the element targeted is first element in its class and perform actions accordingly.

For eg. I have a select element with class name 'team'.

Now I need to check if the selected element is whether a first element or not.

Here's my HTML:

Initially there's a single select and checkbox input. On clicking a button, more select and checkbox inputs are added.

<div class="col-sm-7" id="include-fields">
   <select name="team[]" class="form-control team" id="team">
     <option></option>
     <option value="1">1</option>
   </select>

   <label>Lead</label>
   <input type="checkbox" name="lead_check[]">
</div>
<div class="col-sm-offset-2">
    <button id="includes" class="btn btn-success"><i class="fa fa-plus"></i>
    </button>
</div>

Dynamic select and checkbox generating:

$('#includes').click(function(e)
{
  e.preventDefault();
  $('#include-fields').append('<div class="holder-includes"><a href="#" class="remove-includes"><i class="fa fa-trash-o pull-right"></i></a>' +
    '<select name="team[]" class="form-control team">'+
    '<input type="checkbox" name="lead_check[]"></div>');

  var items = "";
  $.post("teamFetch", function(data)
  {
    $.each(data,function(index,item) 
    {
      items+="<option value='"+item.id+"'>"+item.title+"</option>";
    });

    $(".team:last").html(items); 
  }, "json");

});

I tried following, but no luck:

$(document).on("change",".team",function(e){
  var target = $(e.target);
  if(target.is(".team:first"))
  {
    $(this).parent('div#include-fields').find("input[name='lead_check[]']").val($(this).val());
  }
  $(this).siblings("input[name='lead_check[]']").val($(this).val());
});

Here, first select element is already there, but other select elements are added dynamically later. They all have the same class team.

Answer 1

To check if the select element is a first child of its parent among all the sibling you can use this script.

$(document).ready(function(){
  $(document).on("change","#include-fields .team:first",function(){
     alert($(this).val());
  });
});

Alert will only get triggered on the first select element. Here is a fiddle