如何选择当前div之外的前一个输入元素但具有相同的父div

Question

我的HTML代码是：

<div id="subjects">
  <div class="group">
    <label for="n1">1. Name</label>
    <div class="child">
      <input type="text" name="" id="" />
    </div>
  </div>
  <div class="group">
    <label for="n2">2. Name</label>
    <div class="child">
      <input type="text" name="" id="" />
    </div>
  </div>
  <div class="group">
    <label for="n3">3. Name</label>
    <div class="child">
      <input type="text" name="" id="" />
    </div>
  </div>
</div>

我只想点击第二个或第三个输入元素，如果前一个输入元素为空，则必须显示一个警告框。

Answer 1

$('input').on('click', function() {
  var index = $('#subjects input').index(this);

  if (index > 0 && $('#subjects input').eq(index-1).val() == '')
    alert("Previous input is empty");
});

https://jsfiddle.net/bdvte1cm/1/

Answer 2

试试这个：

$(".required-input").click(function() {
  $($(".required-input").get().reverse()).each(function() {
    if($(this).val() === "") {
      $(this).focus();
      return;
    }
  })
})

您需要在输入中添加此自定义类：

  <div id="subjects">
    <div class="group">
      <label for="n1">1. Name</label>
      <div class="child">
        <input type="text" name="" class="required-input" id="" />
      </div>
    </div>
    <div class="group">
      <label for="n2">2. Name</label>
      <div class="child">
        <input type="text" name="" class="required-input" id="" />
      </div>
    </div>
    <div class="group">
      <label for="n3">3. Name</label>
      <div class="child">
        <input type="text" name="" class="required-input" id="" />
      </div>
    </div>
  </div>

Plunker：https://plnkr.co/edit/uQJMNEGxEjDnewkXp5wr?p=preview

Answer 3

您需要做的第一件事是为所有输入添加id s。接下来将循环输入。可能这不是可扩展的，但如果输入的数量较少，则可行：

＆＃13;

＆＃13;

$(function () {
  $("input:text").focus(function () {
    myID = this.id;
    $("input").each(function () {
      if (this.id == myID)
        return;
      if (this.value.trim().length == 0)
        alert("Please fill the previous one.");
    });
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subjects">
  <div class="group">
    <label for="n1">1. Name</label>
    <div class="child">
      <input type="text" name="n1" id="n1" />
    </div>
  </div>
  <div class="group">
    <label for="n2">2. Name</label>
    <div class="child">
      <input type="text" name="n2" id="n2" />
    </div>
  </div>
  <div class="group">
    <label for="n3">3. Name</label>
    <div class="child">
      <input type="text" name="n3" id="n3" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

第二次尝试：

＆＃13;

＆＃13;

$(function () {
  $("input:text").focus(function () {
    myID = this.id;
    for (i = 1; i < parseInt(myID[1]); i++)
      if ($("#n" + i).val().trim().length == 0) {
        alert("Please fill the previous one.");
        return;
      }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="subjects">
  <div class="group">
    <label for="n1">1. Name</label>
    <div class="child">
      <input type="text" name="n1" id="n1" />
    </div>
  </div>
  <div class="group">
    <label for="n2">2. Name</label>
    <div class="child">
      <input type="text" name="n2" id="n2" />
    </div>
  </div>
  <div class="group">
    <label for="n3">3. Name</label>
    <div class="child">
      <input type="text" name="n3" id="n3" />
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你的HTML有一些缺点：

指定如下标签：

<label for="n1">1. Name</label>

相应的输入字段必须是：

<input type="text" name="" id="n1" />

id不能为void或与label的for属性不同。

摘录：

$(function () {
  // for each input except the first one, when you click...
  $('#subjects').find(':text:gt(0)').on('click', function(e) {
    // get the first input
    var firstEle = $('#subjects').find(':text:eq(0)');
    // check if it's empty
    if (firstEle.val().length == 0) {
      alert('empty');
      firstEle.focus();
    }
  })
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>


<div id="subjects">
    <div class="group">
        <label for="n1">1. Name</label>
        <div class="child">
            <input type="text" name="" id="n1" />
        </div>
    </div>
    <div class="group">
        <label for="n2">2. Name</label>
        <div class="child">
            <input type="text" name="" id="n2" />
        </div>
    </div>
    <div class="group">
        <label for="n3">3. Name</label>
        <div class="child">
            <input type="text" name="" id="n3" />
        </div>
    </div>
</div>