jQuery的遍历-prev()和next()方法

最新推荐文章于 2026-05-06 10:47:47 发布

原创最新推荐文章于 2026-05-06 10:47:47 发布 · 1.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

笔记

当前文章被收录于：

笔记

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这篇博客介绍了如何使用jQuery实现点击加减按钮动态改变文本框内的数值。通过`.prev()`和`.next()`方法选取元素，实现了数值的增加和减少功能，适用于前端页面中的数量控制场景。

</div>

$(function(){

const $add = $(".b")

const $reduce = $(".a")

$add.click(function () {
        //获取值
        let value = $(this).prev().val()
        // console.log(value)
        value++
        //输出到数量框
        $(this).prev().val(value)
    })
    //减少
    $reduce.click(function () {
        let value = $(this).next().val()
        if (value == 1) return
        value--
        $(this).next().val(value)
    })

ps:1.prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素

2.next() 获得匹配元素集合中每个元素紧邻的后一个同胞元素

标签

#jquery #前端 #javascript