jquery - 单击按钮获取下一个和上一个输入

Question

我需要通过单击 a元素样式作为按钮来获取上一个和下一个输入的值...示例代码：

<ul>
    <li>
        <input type="text">
    </li>
</ul>
<ul>
    <li class="li-inline">
        <a class="btn" href="#">
            <i class=""></i>
        </a>
    </li>
</ul>
<ul>
    <li>
        <input type="text">
    </li>
</ul>

我尝试使用next()和prev()jquery 方法，但没有达到预期的结果。

$("a").click(function() {
  $(this).next(":input");
});

Answer 1

ul首先，您必须使用到达父级，然后使用或分别closest()转到下一个或上一个，并使用在后代中查找输入ulnext()prev()find()

现场演示

$("a").click(function() {
     $(this).closest('ul').prev('ul').find(":input");
     $(this).closest('ul').next('ul').find(":input");
});

Answer 2

试试这个：

$("a").click(function() {
    var $a = $(this);
    var prevInputValue = $a.closest('ul').prev().find('input').val();
    var nextInputValue = $a.closest('ul').next().find('input').val();
});

在您的原始代码中，next()不起作用，因为input元素不是a. 您需要遍历 DOM 以找到ul包含它们的相关内容。

Answer 3

试试下面的代码

$("a").click(function() {

var previous =   $($(this).closest('ul').prev('ul').find.(":input").get(0)).val();

var next=   $($(this).closest('ul').next('ul').find.(":input").get(0)).val();
});

谢谢