Как получить prev (), а не просто брат

Question

У меня 5 кнопок, и только 4 кнопки расположены рядом друг с другом.Есть одна кнопка, которая находится в своем собственном div.Как я могу получить к нему что-то вроде prev()?

Вот пример кода:

<div>
  <div>
    <input type="button" class="test" value="Test1">
  </div>

  <input type="button" class="test" value="Test 2">
  <input type="button" class="test" value="Test 3">
  <input type="button" class="test" value="Test 4">
  <input type="button" class="test" value="Test 5">
</div>

<script>
$(".test").click(function() {
  var value = $(this).prev().val();
  alert(value);
});
</script>

Ссылка: https://jsfiddle.net/fzwqmyb4/3/

Когда я нажимаю «Тест 4», он показывает «Тест 3», что хорошо.Но когда я нажимаю на кнопку «Тест 2», она должна показывать «Тест 1», но это не так.Причина в том, что prev() работает только для братьев и сестер.

Но как я могу создать динамический код, который обнаруживает предыдущее что-то, даже если оно находится в другом div?

Answer 1

Вы можете проверить, является ли предыдущий элемент входным или нет, если нет, найти дочерний элемент.Проверьте эти коды:

$(".test").click(function(){
    var prevElement = $(this).prev().get(0);
    if(prevElement && prevElement.nodeName !== 'INPUT')
    {
      prevElement = $(prevElement).find('input').get(0);
    }

    var value = prevElement ? prevElement.value : '';
    alert(value);
});

Answer 2

1. Используя index, получите индекс текущего элемента, по которому щелкнули, с помощью теста класса, затем вычтите 1, чтобы получить предыдущий элемент с тем же классом

$("input.test").click(function() {
  var index = $(this).index()
  var prevval = $("input.test").eq(index - 1).val()

  console.log(prevval)

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <input type="button" class="test" value="Test1">
  </div>

  <input type="button" class="test" value="Test 2">
  <input type="button" class="test" value="Test 3">
  <input type="button" class="test" value="Test 4">
  <input type="button" class="test" value="Test 5">
</div>

Answer 3

prev() находит только предыдущего родного брата. Чтобы найти вложенный элемент, вам нужно добавить еще немного логики в вашу функцию:

$(".test").click(function() {
    var value;
    var prevTagName = $(this).prev().prop("tagName");
  
    switch(prevTagName)
    {
        case undefined:
            value = "no previous siblings";
            break;
            
        case "INPUT":
            value = $(this).prev().val();
            break;
            
        case "DIV":
            value = $(this).closest("div").find("input").val();
            break;
            
        default:
            value = "undefined";
            break;            
    }

    alert(value);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div>
    <input type="button" class="test" value="Test1">
  </div>

  <input type="button" class="test" value="Test 2">
  <input type="button" class="test" value="Test 3">
  <input type="button" class="test" value="Test 4">
  <input type="button" class="test" value="Test 5">
</div>