如何通过多个输入字段的值来查找div

时间:2016-11-07 07:44:28

标签: jquery

我有两个div。所有领域都相同的地方。但是我需要根据它的两个字段值riskDiv_section_coderiskDiv_section_name来获得一个div。我有以下div:

    <div class="panel panel-light-grey">
    <div class="panel-heading">
        <h5 class="panel-title">
        <a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
            <i class="icon-arrow"></i>
            <span> Section : <label>abc</label>&nbsp; || <b>Activity :</b> <label>1</label>
            </span>
        </a>
        </h5>
    </div>
    <div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
        <div class="panel-body">
            <div class="col-md-6 form-group">
                <label class="control-label">Section Code</label>
                <input name="riskDiv_section_code" type="text" value="123" class="readonly form-control required" readonly="">
            </div>
            <div class="col-md-6 form-group">
                <label class="control-label">Section Name</label>
                <input name="riskDiv_section_name" type="text" value="456" class="readonly form-control required" readonly="">
            </div>
        </div>
    </div>
</div>
<div class="panel panel-light-grey">
    <div class="panel-heading">
        <h5 class="panel-title">
        <a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
            <i class="icon-arrow"></i>
            <span> Section : <label>xyz</label>&nbsp; || <b>Activity :</b> <label>2</label>
            </span>
        </a>
        </h5>
    </div>
    <div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
        <div class="panel-body">
            <div class="col-md-6 form-group">
                <label class="control-label">Section Code</label>
                <input name="riskDiv_section_code" type="text" value="abc" class="readonly form-control required" readonly="">
            </div>
            <div class="col-md-6 form-group">
                <label class="control-label">Section Name</label>
                <input name="riskDiv_section_name" type="text" value="xyz" class="readonly form-control required" readonly="">
            </div>
        </div>
    </div>
</div>

有人可以帮我吗?我没有写任何代码来做到这一点。因为我只有一个想法可以遍历所有div,但我不想迭代。任何人都可以提供其他方法。

1 个答案:

答案 0 :(得分:2)

您可以使用.filter( function )获取目标div,然后可以使用remove();

  

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

var code= '123';
var name= '456';

var elemes = $('.panel').filter(function(){
    var $this = $(this);
    var riskDiv_section_code = $this.find('[name=riskDiv_section_code]').val().trim();
    var riskDiv_section_name = $this.find('[name=riskDiv_section_name]').val().trim();
    return riskDiv_section_code == code && riskDiv_section_name == name
});

elemes.remove();

jQuery(function($) {
  var code = '123';
  var name = '456';
  var elemes = $('.panel').filter(function() {
    var $this = $(this);
    var riskDiv_section_code = $this.find('[name=riskDiv_section_code]').val().trim();
    var riskDiv_section_name = $this.find('[name=riskDiv_section_name]').val().trim();
    return riskDiv_section_code == code && riskDiv_section_name == name
  });

  elemes.remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-light-grey">
  <div class="panel-heading">
    <h5 class="panel-title">
        <a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
            <i class="icon-arrow"></i>
            <span> Section : <label>abc</label>&nbsp; || <b>Activity :</b> <label>1</label>
            </span>
        </a>
        </h5>
  </div>
  <div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
    <div class="panel-body">
      <div class="col-md-6 form-group">
        <label class="control-label">Section Code</label>
        <input name="riskDiv_section_code" type="text" value="123" class="readonly form-control required" readonly="">
      </div>
      <div class="col-md-6 form-group">
        <label class="control-label">Section Name</label>
        <input name="riskDiv_section_name" type="text" value="456" class="readonly form-control required" readonly="">
      </div>
    </div>
  </div>
</div>
<div class="panel panel-light-grey">
  <div class="panel-heading">
    <h5 class="panel-title">
        <a class="accordion-toggle bold" data-toggle="collapse" data-parent="#accordion" href="#section_activity_risk_block1478501245008">
            <i class="icon-arrow"></i>
            <span> Section : <label>xyz</label>&nbsp; || <b>Activity :</b> <label>2</label>
            </span>
        </a>
        </h5>
  </div>
  <div id="section_activity_risk_block1478501245008" class="panel-collapse collapse in">
    <div class="panel-body">
      <div class="col-md-6 form-group">
        <label class="control-label">Section Code</label>
        <input name="riskDiv_section_code" type="text" value="abc" class="readonly form-control required" readonly="">
      </div>
      <div class="col-md-6 form-group">
        <label class="control-label">Section Name</label>
        <input name="riskDiv_section_name" type="text" value="xyz" class="readonly form-control required" readonly="">
      </div>
    </div>
  </div>
</div>