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

首先，您必须使用closest()与父ul联系，然后分别使用next()或prev()转到下一个或上一个ul并查找输入后代使用find()

<强> Live Demo

$("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();
});

由于

点击按钮获取下一个和上一个输入

3 个答案: