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.

By "first" you mean "first by creation moment" or "first by order in which it appears in the DOM"? — Federico klez Culloca, Mar 26 '18 at 10:26
You might want to add some HTML as an example to illustrate what exactly you want to select for. — H.B., Mar 26 '18 at 10:26
@FedericoklezCulloca first by order in which it appears in the DOM. but both is correct in my case. — Azima, Mar 26 '18 at 10:27
I would suggest you add additional (data-) attributes to your Elements. Would make it less "complex". But as the previous speaker said, you might want to add some HTML/code that explains your problem. — Thomas Wikman, Mar 26 '18 at 10:29
The code that checks for first element is correct. Something could be wrong _inside_ the `if` statement. — Salman A, Mar 26 '18 at 11:09
Wait a minute... are you trying to "check" the first checkbox? — Salman A, Mar 26 '18 at 11:19
@SalmanA yes.. I want to assign a value to checkbox with a value of select element's value that is closer to it. It is working fine with other dynamically generated checkboxes, but not with the first one since it's DOM traversal is a bit different with the rest of others. — Azima, Mar 26 '18 at 11:22
@Azima Looking at the markup I think the same code `$(this).siblings("input[name='lead_check[]']")...` can be used for either case. You don't need special handling for first select. — Salman A, Mar 26 '18 at 11:32
@SalmanA yes.. but I want to fetch the required value differently with the first element — Azima, Mar 26 '18 at 11:34

score 0 · Answer 1 · answered Mar 26 '18 at 11:21

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

check if target element is first element in class

1 Answers1