如何获得prev（）而不只是同级

Question

I have 5 buttons and only 4 of the buttons are next to each other. THere is one button that is in its own div. How can I access it with something like prev() ?

Here is an example code:

<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>

Link: https://jsfiddle.net/fzwqmyb4/3/

When i press "Test 4", it shows "Test 3" which is good. But when I press on button "Test 2", it should show "Test 1" but it does not. The reason is because prev() only works for siblings.

But how can I make a dynamic code that detects the previous of something even if its in another div?

Answer 1

You can check if the previous element is an input or not, if no, find the child. Check these code:

$(".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

prev() only finds the previous sibling. To find a nested element, you need to add some more logic to your function:

 $(".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> 

Answer 3

1. Using index, get the index of the current clicked element with the class test then subtract 1 to get the previous element with the same class

 $("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>