jQuery 获取当前 div 下 input 的值

在前端开发中，经常需要通过 JavaScript 获取页面元素的值，以便进行后续的处理或操作。而使用 jQuery 这个强大的 JavaScript 库，可以更加方便地实现这一功能。本文将介绍如何使用 jQuery 获取当前 div 元素下的 input 的值，并附上相应的代码示例。

什么是 jQuery

[jQuery]( 是一个快速、简洁的 JavaScript 库，被广泛用于 web 开发中。它简化了 HTML 文档遍历、事件处理、动画效果等操作，使开发者能够更简单、更高效地操作页面元素。

获取当前 div 下 input 的值

假设我们有一个 HTML 页面，其中包含多个 div 元素，每个 div 元素里面都有一个 input 元素。我们想要获取当前 div 元素下的 input 的值，可以使用 jQuery 的选择器和方法来实现。

首先，我们需要给每个 div 元素添加一个共同的类名，以便我们可以通过该类名来选择相应的 div 元素。例如，我们给这些 div 元素添加一个名为 "input-container" 的类名。

<div class="input-container">
  <input type="text" value="Input 1">
</div>

<div class="input-container">
  <input type="text" value="Input 2">
</div>

<div class="input-container">
  <input type="text" value="Input 3">
</div>

接下来，我们可以使用 jQuery 的 each 方法遍历每个 div 元素，并使用 find 方法来找到当前 div 元素下的 input 元素。最后，使用 val 方法获取 input 的值并进行处理。

$(".input-container").each(function() {
  var inputValue = $(this).find("input").val();
  // 对 inputValue 进行相应的处理
});

在上面的代码中，$(".input-container") 选择了所有具有 "input-container" 类名的 div 元素，each 方法对每个 div 元素进行遍历。$(this) 表示当前遍历到的 div 元素，find("input") 选择了该 div 元素下的 input 元素，val 方法获取了 input 的值并赋给 inputValue 变量。

完整示例

下面是一个完整的示例，展示了如何使用 jQuery 获取当前 div 元素下的 input 的值，并将其显示在控制台上。

<!DOCTYPE html>
<html>
<head>
  <script src="
</head>
<body>

  <div class="input-container">
    <input type="text" value="Input 1">
  </div>

  <div class="input-container">
    <input type="text" value="Input 2">
  </div>

  <div class="input-container">
    <input type="text" value="Input 3">
  </div>

  <script>
    $(".input-container").each(function() {
      var inputValue = $(this).find("input").val();
      console.log(inputValue);
    });
  </script>

</body>
</html>

打开浏览器并运行上述代码，你将在控制台中看到输出的三个 input 的值。

总结

使用 jQuery 获取当前 div 元素下的 input 的值可以帮助我们更方便地操作表单数据或进行一些特定的处理。通过选择器和方法的组合，我们可以快速准确地获取所需的元素，并进行相应的操作。希望本文对你理解 jQuery 的使用有所帮助。

引用：[jQuery](

通过以上的代码示例和解释，我们可以看到如何使用 jQuery 来获取当前 div 元素下的 input 的值。通过简单的选择器和方法的运用，我们可以轻松地实现这一功能。使用 jQuery 不仅可以简化代码的编写，还可以提高开发效率。希望本文对你有所帮助，让你更好地了解和运用 jQuery。