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

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>

Answer 3

使用索引，使用类test获取当前单击元素的索引，然后减去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>

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

3 个答案: