jQuery onkeyup每个块的第一个输入

Question

我有以下（简化的）HTML标记：

<div class="accordion">
    <div class="block">
        <input type="text" name="name1">
        <input type="text" name="name2">
    </div>
    <div class="block">
        <input type="text" name="name3">
        <input type="text" name="name4">
    </div>
    <div class="block">
        <input type="text" name="name5">
        <input type="text" name="name6">
    </div>
</div>

我想要做的是定位每个.block的每个第一个输入字段。我希望这可行：

$(document).on('keyup', '.block input:first-child', function() {
    console.log($(this).val());
});

然而，这不会输出任何内容，所以我尝试了以下内容：

$(document).on('keyup', '.block input:first', function() {
    console.log($(this).val());
});

这确实有效，但仅适用于第一个输入字段。

如何定位每个.block中的每个第一个输入，而不必按名称定位它们，因为它们是可变的？

这是实际的HTML：

<div class="accordion_nested">
	<h5>title</h5>
	<div class="block">
		<div class="form-group">
			<label for="field_113">
				title
			</label>
			<a href="#" class="question"><i class="fas fa-question-circle"></i></a>
			<span class="question_block"><p><em>text here</span>
			<input type="text" name="field_113[0]" value="test test" placeholder="" class="form-control" autocomplete="off">
		</div>
		<div class="form-group">
			<label for="field_114">
				title
			</label>
			<a href="#" class="question"><i class="fas fa-question-circle"></i></a>
			<span class="question_block"><p><em>text here</span>
			<input type="text" name="field_114[0]" value="test test" placeholder="" class="form-control" autocomplete="off">
		</div>
	</div>
	<div class="block">
		<div class="form-group">
			<label for="field_113">
				title
			</label>
			<a href="#" class="question"><i class="fas fa-question-circle"></i></a>
			<span class="question_block"><p><em>text here</span>
			<input type="text" name="field_113[1]" value="test test" placeholder="" class="form-control" autocomplete="off">
		</div>
		<div class="form-group">
			<label for="field_114">
				title
			</label>
			<a href="#" class="question"><i class="fas fa-question-circle"></i></a>
			<span class="question_block"><p><em>text here</span>
			<input type="text" name="field_114[1]" value="test test" placeholder="" class="form-control" autocomplete="off">
		</div>
	</div>
</div>

Answer 1

您需要定位.form-group:first-child的输入元素

$(document).on('keyup', '.block .form-group:first-child input', function() {
  console.clear();
  console.log($(this).val());
});

这里我删除了不相关的HTML（因为它包含无效的HTML）

$(document).on('keyup', '.block .form-group:first-child input', function() {
  console.clear();
  console.log($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion_nested">
  <h5>title</h5>
  <div class="block">
    <div class="form-group">
      <input type="text" name="field_113[0]" value="test test" placeholder="" class="form-control" autocomplete="off" />
    </div>
    <div class="form-group">
      <input type="text" name="field_114[0]" value="test test" placeholder="" class="form-control" autocomplete="off" />
    </div>
  </div>
</div>

Answer 2

使用:first-child，而:first只匹配一个元素，:first-child选择器可以匹配多个：每个父级一个。这相当于:nth-child(1)

＆＃13;

＆＃13;

$(document).on('keyup', '.block input:first-child', function() {
    console.log($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
    <div class="block">
        <input type="text" name="name1">
        <input type="text" name="name2">
    </div>
    <div class="block">
        <input type="text" name="name3">
        <input type="text" name="name4">
    </div>
    <div class="block">
        <input type="text" name="name5">
        <input type="text" name="name6">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

当前代码正常运行

为每个input

提供第一个孩子block key up值

＆＃13;

＆＃13;

$(document).on('keyup', '.block input:first-child', function() {
  console.log($(this).val());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
  <div class="block">
    <input type="text" name="name1">
    <input type="text" name="name2">
  </div>
  <div class="block">
    <input type="text" name="name3">
    <input type="text" name="name4">
  </div>
  <div class="block">
    <input type="text" name="name5">
    <input type="text" name="name6">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;