检查目标元素是否是类中的第一个元素

时间:2018-03-26 10:24:07

标签: javascript jquery html dom-traversal jquery-traversing

我需要检查目标元素是否是其类中的第一个元素并相应地执行操作。

例如。我有一个带有班级名称' team'的选择元素。

现在我需要检查所选元素是否是第一个元素。

这是我的HTML:

最初只有一个选择和复选框输入。单击按钮时,会添加更多选择和复选框输入。

<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>

动态selectcheckbox生成:

$('#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");

});

我试过跟随,但没有运气:

$(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());
});

此处,第一个select元素已存在,但稍后会动态添加其他select元素。他们都有相同的班级team

1 个答案:

答案 0 :(得分:0)

要检查select元素是否是所有兄弟姐妹中父元素的第一个子元素,您可以使用此脚本。

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

仅在第一个选择元素上触发警报。这是fiddle