jquery 获取input同级前面的input

原创

mob64ca12f062df 2024-02-02 05:11:04 ©著作权

文章标签 输入框 jQuery 选择器 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12f062df的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery获取input同级前面的input

在Web开发中，我们经常需要通过JavaScript获取DOM元素并进行操作。而jQuery是一个广泛使用的JavaScript库，可以方便地操作DOM，简化了代码编写的过程。本文将介绍如何使用jQuery获取input同级前面的input，并附有代码示例。

1. 获取同级前面的input

首先，我们需要了解jQuery的选择器。选择器是用于选择要操作的DOM元素的一种方法。在jQuery中，可以使用各种选择器来选择DOM元素，如元素选择器、类选择器、ID选择器等。

要获取input同级前面的input，可以使用jQuery的prev()方法。该方法返回被选元素的前一个同级元素。结合选择器，我们可以将其用于获取input同级前面的input。

以下是示例代码：

$(document).ready(function() {
  // 获取input同级前面的input
  var prevInput = $("input").prev("input");
  console.log(prevInput.val());
});

在这个例子中，我们首先使用$("input")选择所有的input元素，然后使用prev("input")方法获取同级前面的input元素，并将其赋值给prevInput变量。最后，我们使用console.log()将获取到的input元素的值输出到控制台。

2. 示例说明

为了更好地理解如何使用jQuery获取input同级前面的input，我们来看一个示例场景。

假设我们有一个表单，其中包含多个输入框。每个输入框前面都有一个前缀输入框，用于输入相应字段的描述信息。我们希望在用户输入内容后，自动获取前缀输入框的值，并进行相应操作。

HTML代码如下：

<div>
  <input type="text" class="prefix" value="姓名：">
  <input type="text" class="input">
</div>
<div>
  <input type="text" class="prefix" value="年龄：">
  <input type="text" class="input">
</div>

JavaScript代码如下：

$(document).ready(function() {
  $("input.input").on("input", function() {
    var prefixInput = $(this).prev(".prefix");
    console.log(prefixInput.val());
  });
});

在这个例子中，我们使用了事件监听方法on()，监测输入框的输入事件。当用户在输入框中输入内容时，会触发该事件，并执行回调函数。回调函数中使用$(this)获取当前输入框，并使用prev(".prefix")方法获取同级前面的class为.prefix的输入框。最后，我们使用console.log()将获取到的前缀输入框的值输出到控制台。