Jquery Traversal | Smartchart开发手册

Introduction #

jQuery DOM traversal methods are used in HTML components to find and manipulate parent, child, and sibling relationships of HTML elements, or filter element collections matching specific criteria. In SmartChart HTML component development, they are commonly used to get form values, bind events, and dynamically modify styles.

Category	Common Methods
Upward Traversal	`.parent()` / `.parents()` / `.parentsUntil()`
Downward Traversal	`.children()` / `.find()`
Horizontal Traversal	`.siblings()` / `.next()` / `.prev()` / `.nextAll()` / `.prevAll()`
Filtering	`.first()` / `.last()` / `.eq(n)` / `.filter()` / `.not()`
Iteration	`$(selector).each(fn)` / `$.each(arr, fn)`

Use Cases #

When developing custom HTML components, you often need jQuery DOM traversal to get user input values, bind events, or modify styles. This article summarizes common jQuery DOM traversal methods.

1. Upward Traversal (Find Ancestors) #

// 1. parent() — Get direct parent element
$("span").parent().css("color", "red")

// 2. parents() — Get all ancestor elements (up to html root)
$("span").parents("div").css("border", "1px solid red")

// 3. parentsUntil() — Traverse up until reaching specified ancestor (excluding it)
$("span").parentsUntil("div").css("color", "red")

2. Downward Traversal (Find Children/Descendants) #

// 1. children() — Find direct children (one level only)
$("ul").children("li:first-child").css("color", "red")

// 2. find() — Deep search for all matching descendants
$("ul").find("span").css("font-weight", "bold")
$("ul").find("*")    // Find all descendants

3. Horizontal Traversal (Find Siblings) #

// 1. siblings() — Get all sibling elements
$(".current").siblings().css("opacity", "0.5")

// 2. next() — Get next sibling element
$(".current").next().show()

// 3. nextAll() — Get all following siblings
$(".current").nextAll().css("color", "gray")

// 4. nextUntil() — Get following siblings until specified element
$(".current").nextUntil("li:last-child").hide()

// 5. prev() — Get previous sibling element
$("li.current").prev().css("color", "blue")

// 6. prevAll() — Get all preceding siblings
$("li.current").prevAll().css("color", "gray")

// 7. prevUntil() — Get preceding siblings until specified element
$(".current").prevUntil("li:first").css("color", "gray")

// 1. first() — Get first element
$("li").first().css("color", "red")

// 2. last() — Get last element
$("li").last().css("color", "blue")

// 3. eq(n) — Get element at index n (0-based)
$("li").eq(2).css("background", "yellow")

// 4. not() — Exclude elements matching criteria
$("li").not(":eq(2)").css("font-size", "14px")

// 5. has() — Filter elements containing specified child element
$("li").has("span").css("border", "1px solid #ddd")
// Check existence: $("li").eq(1).has("span").length > 0

// 6. filter() — Filter elements matching criteria from collection
$("div").filter(".active").css("color", "red")

// 7. is() — Check if element matches criteria, returns true/false
if ($("p").parent().is("div")) {
    console.log("p's parent is div")
}

5. each() Iteration #

// 1. $(selector).each() — Iterate matched DOM element collection
$("li").each(function(index, element) {
    console.log(index, $(element).text())
    // Can also use this instead of element
    $(this).css("color", index % 2 === 0 ? "red" : "blue")
})

// 2. $.each(obj, fn) — Iterate arrays or objects (DOM-independent)
let arr = ["Changsha", "Guangzhou", "Shenzhen"]
$.each(arr, function(index, value) {
    console.log(index, value)
})

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

Common SmartChart Scenarios #

Get Form Input Values #

// Get input box value
let keyword = $('#container___name__ input[type=text]').val()

// Get all checked checkbox values
let selected = []
$('#container___name__ input[type=checkbox]:checked').each(function() {
    selected.push($(this).val())
})

// Get dropdown selected value
let city = $('#container___name__ select').val()

Click List Row for Linked Refresh #

// Bind table row click event (use unbind to avoid duplicate binding)
$('#container___name__ tr').unbind('click').click(function() {
    // Get first column value
    let val = $(this).find('td').eq(0).text()
    ds_setParam('city', val)
    ds_refresh(2)
})

Dynamically Modify Element Styles #

// Highlight selected row, restore other rows
$('#container___name__ li').unbind('click').click(function() {
    $(this).siblings().css('background', '')   // Clear other rows' highlight
    $(this).css('background', 'rgba(24,144,255,0.15)')  // Highlight current row
})