当我按下GET按钮时，如何获得最接近的输入val标签和名称？

Question

这是我的html片段，输入是标签和内容。

=============================================== ========================

<div class="row">
            <div class="col-md-5">
                <div class="form-group ">
                    <label>Nome del campo</label>
                    <div class="input">
                        <input class="form-control" name="label" value="c">
                        <input type="hidden" class="form-control" name="id_anagrafica" value="184">
                    </div>
                </div>
            </div>


            <div class="col-md-2">
                <div class="form-group ">
                    <label>Valore</label>
                    <div class="input">
                        <input class="form-control" name="content" value="d">
                    </div>
                </div>
            </div>
            <div class="col-md-2" style="margin-top: 16px">
                <button type="button" class="btn btn-danger" onclick="getInfo(event)">GET</button>
            </div>
        </div>

Answer 1

＆＃13;

＆＃13;

$(".btn-danger").click(function() {
  console.log("Label " + $(this).parent('div').prev('div').find('label').text())
  console.log("input " + $(this).parent('div').prev('div').find('input').val())
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-5">
    <div class="form-group ">
      <label>Nome del campo</label>
      <div class="input">
        <input class="form-control" name="label" value="c">
        <input type="hidden" class="form-control" name="id_anagrafica" value="184">
      </div>
    </div>
  </div>


  <div class="col-md-2">
    <div class="form-group ">
      <label>Valore</label>
      <div class="input">
        <input class="form-control" name="content" value="d">
      </div>
    </div>
  </div>
  <div class="col-md-2" style="margin-top: 16px">
    <button type="button" class="btn btn-danger">GET</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

1. 使用.parent（）获取父div然后使用prev（）获取标签和输入的容器
2. 然后使用.text（）获取label和.val（）的文本以获取输入值

Answer 2

尝试使用jquery。使用getInfo(event,this)

更改函数

1. previous div.col-md-2上有输入，因此请与prev()
联系
2. 然后应用find()采取特定元素
＆＃13;
＆＃13;
function getInfo(e,that){
console.log($(that).closest('.col-md-2').prev('.col-md-2').find('.form-control').val())
console.log($(that).closest('.col-md-2').prev('.col-md-2').find('label').text())
console.log($(that).closest('.col-md-2').prev('.col-md-2').find('.form-control').attr('name'))

}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-5">
  <div class="form-group ">
    <label>Nome del campo</label>
    <div class="input">
      <input class="form-control" name="label" value="c">
      <input type="hidden" class="form-control" name="id_anagrafica" value="184">
    </div>
  </div>
</div>


<div class="col-md-2">
  <div class="form-group ">
    <label>Valore</label>
    <div class="input">
      <input class="form-control" name="content" value="d">
    </div>
  </div>
</div>
<div class="col-md-2" style="margin-top: 16px">
  <button type="button" class="btn btn-danger" onclick="getInfo(event,this)">GET</button>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 3

如果你需要内容的价值，你应该使用closest()使用带有按钮和输入的div，然后使用find()获取名称为content <的输入/ p>

＆＃13;

＆＃13;

function getInfo(el) {
var content = $(el).closest('.row').find('input[name="content"]').val()
  console.log(content);

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-5">
    <div class="form-group ">
      <label>Nome del campo</label>
      <div class="input">
        <input class="form-control" name="label" value="c">
        <input type="hidden" class="form-control" name="id_anagrafica" value="184">
      </div>
    </div>
  </div>


  <div class="col-md-2">
    <div class="form-group ">
      <label>Valore</label>
      <div class="input">
        <input class="form-control" name="content" value="d">
      </div>
    </div>
  </div>
  <div class="col-md-2" style="margin-top: 16px">
    <button type="button" class="btn btn-danger" onclick="getInfo(this)">GET</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

Add input type text in input tag


$(".form-group").each(function(){
  var formVal = $(this).find(".form-control[type='text']").val();
  var formHiddenVal = $(this).find(".form-control[type='hidden']").val();
  var labelTxt = $(this).children("label").text();
});