Question

我想使用jQuery从下一个输入表单中获取pid的值

但是它确实返回undefined。我尝试了许多其他技巧，但没有用。非常感谢您的建议。

$(document).ready(function() {
  $(".replyit").click(function() {
    let pid = $(this).next(".pid").val();
    console.log('pid is', pid);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row treply">
  <div class="col-xs-1">
    <img src="dot.svg">
  </div>
  <div class="col-xs-2">
    <a class="replyit" href="#">Reply</a>
  </div>
</div>
<ul>
  <li>
    <p>Some text</p>
  </li>
  <li>
    <form class="likep" name="123" method="post">
      <input type="hidden" name="token" value="afewf">
      <input class="pid" type="hidden" name="pid" value="123">

    </form>
  </li>

Answer 1

下一个是用于同级的，您的链接不是输入字段的同级。
您可能想取消点击

假设有几组答复，此代码将为您提供每组的下一个输入

$(document).ready(function() {
  $(".replyit").on("click", function(e) {
    e.preventDefault(); // cancel the href click
    const pid = $(this).closest(".treply") // OR this.parents("div"), which is not as specific
      .next() // ul
      .find(".pid").val();
    console.log('pid is', pid);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row treply">
  <div class="col-xs-1">
    <img src="dot.svg">
  </div>
  <div class="col-xs-2">
    <a class="replyit" href="#">Reply</a>
  </div>
</div>
<ul>
  <li>
    <p>Some text</p>
  </li>
  <li>
    <form class="likep" name="123" method="post">
      <input type="hidden" name="token" value="afewf">
      <input class="pid" type="hidden" name="pid" value="123">

    </form>
  </li>
</ul>

Answer 2

使用.next()方法将搜索.replyit元素的直接同级（在同一级别）。由于.pid元素不是.replyit的同级元素，因此返回的值为undefined。

要解决此问题，请使用.parents()和.find()方法而不是.next()来以正确的方式遍历DOM

$(".replyit").click(function() {
  let pid = $(this).parents().next("ul").find(".pid").val();
  console.log(pid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <div>
    <a class="replyit" href="#">Reply</a>
  </div>
</div>
<ul>
  <li>
    <p>Some text</p>
  </li>
  <li>
    <form class="likep" name="123" method="post">
      <input type="hidden" name="token" value="afewf">
      <input class="pid" type="hidden" name="pid" value="123">

    </form>
  </li>
</ul>

无法使用jQuery从下一个表单获取输入值

2 个答案: