Jquery遍历方法

简介 #

jQuery DOM 遍历方法用于在 HTML 组件中查找、操作 HTML 元素的父子兄弟关系，或筛选符合条件的元素集合。在 SmartChart 的 HTML 组件开发中，常用于获取表单值、绑定事件和动态修改样式。

分类 常用方法
向上遍历 .parent() / .parents() / .parentsUntil()
向下遍历 .children() / .find()
水平遍历 .siblings() / .next() / .prev() / .nextAll() / .prevAll()
过滤筛选 .first() / .last() / .eq(n) / .filter() / .not()
遍历循环 $(selector).each(fn) / $.each(arr, fn)

应用场景 #

在开发自定义 HTML 组件时，经常需要通过 jQuery 遍历 DOM 元素来获取用户输入值、绑定事件或修改样式。本文汇总了 jQuery DOM 遍历的常用方法。

一、向上遍历（查找祖先元素） # 

// 1. parent() — 获取直接父元素
$("span").parent().css("color", "red")

// 2. parents() — 获取所有祖先元素（直到 html 根元素）
$("span").parents("div").css("border", "1px solid red")

// 3. parentsUntil() — 向上查找，直到遇到指定祖先为止（不含该祖先）
$("span").parentsUntil("div").css("color", "red")

二、向下遍历（查找子/后代元素） # 

// 1. children() — 查找直接子元素（仅一层）
$("ul").children("li:first-child").css("color", "red")

// 2. find() — 向下深度查找所有匹配的后代元素
$("ul").find("span").css("font-weight", "bold")
$("ul").find("*")    // 查找所有后代

三、水平遍历（查找兄弟元素） # 

// 1. siblings() — 获取所有兄弟元素
$(".current").siblings().css("opacity", "0.5")

// 2. next() — 获取下一个兄弟元素
$(".current").next().show()

// 3. nextAll() — 获取后面所有兄弟元素
$(".current").nextAll().css("color", "gray")

// 4. nextUntil() — 获取后面的兄弟元素，直到遇到指定元素为止
$(".current").nextUntil("li:last-child").hide()

// 5. prev() — 获取上一个兄弟元素
$("li.current").prev().css("color", "blue")

// 6. prevAll() — 获取前面所有兄弟元素
$("li.current").prevAll().css("color", "gray")

// 7. prevUntil() — 获取前面的兄弟元素，直到遇到指定元素为止
$(".current").prevUntil("li:first").css("color", "gray")

四、过滤（筛选元素集合） # 

// 1. first() — 取第一个元素
$("li").first().css("color", "red")

// 2. last() — 取最后一个元素
$("li").last().css("color", "blue")

// 3. eq(n) — 取索引为 n 的元素（从 0 开始）
$("li").eq(2).css("background", "yellow")

// 4. not() — 排除匹配条件的元素
$("li").not(":eq(2)").css("font-size", "14px")

// 5. has() — 筛选包含指定子元素的元素
$("li").has("span").css("border", "1px solid #ddd")
// 判断是否存在：$("li").eq(1).has("span").length > 0

// 6. filter() — 从集合中筛选出符合条件的元素
$("div").filter(".active").css("color", "red")

// 7. is() — 判断元素是否符合条件，返回 true/false
if ($("p").parent().is("div")) {
    console.log("p 的父元素是 div")
}

五、each() 遍历 # 

// 1. $(selector).each() — 遍历匹配的 DOM 元素集合
$("li").each(function(index, element) {
    console.log(index, $(element).text())
    // 也可以用 this 代替 element
    $(this).css("color", index % 2 === 0 ? "red" : "blue")
})

// 2. $.each(obj, fn) — 遍历数组或对象（不依赖 DOM）
let arr = ["长沙", "广州", "深圳"]
$.each(arr, function(index, value) {
    console.log(index, value)
})

let obj = { city: "长沙", sales: 100 }
$.each(obj, function(key, value) {
    console.log(key, value)
})

SmartChart 中的常用场景 #

获取表单中的输入值 # 

// 获取输入框的值
let keyword = $('#container___name__ input[type=text]').val()

// 获取所有已勾选的复选框值
let selected = []
$('#container___name__ input[type=checkbox]:checked').each(function() {
    selected.push($(this).val())
})

// 获取下拉框选中值
let city = $('#container___name__ select').val()

点击列表行联动刷新 # 

// 绑定表格行点击事件（使用 unbind 避免重复绑定）
$('#container___name__ tr').unbind('click').click(function() {
    // 取第一列的值
    let val = $(this).find('td').eq(0).text()
    ds_setParam('city', val)
    ds_refresh(2)
})

动态修改元素样式 # 

// 高亮选中行，恢复其他行
$('#container___name__ li').unbind('click').click(function() {
    $(this).siblings().css('background', '')   // 清除其他行高亮
    $(this).css('background', 'rgba(24,144,255,0.15)')  // 高亮当前行
})
Edit Edit this page