JQuery में traversing का उपयोग HTML तत्वों को खोजने या चुनने के लिए किया जाता है उदाहरण के लिए यदि आप selector के बाद डेटा का चयन करना चाहते हैं, या selector के भव्य डेटा को चुनना चाहते हैं, तो आप traversing के उपयोग से selection कर सकते हैं
यदि आप DOM दस्तावेज़ में object मॉडल से परिचित हैं, तो आप जानते होंगे कि प्रत्येक element किसी अन्य प्रकार के संबंधों से related है एक element एक अन्य element का पूर्वजों, वंश या भाई हो सकता है JQuery traversing आपको उनके संबंधों का उपयोग करने वाले विभिन्न elements के माध्यम से moved करने की अनुमति देता है
अधिकतर DOM ट्रवर्सल मेथड्स jQuery ऑब्जेक्ट को संशोधित नहीं करते हैं और इन्हें दिए गयी परिस्थितियों के आधार पर एक दस्तावेज़ से elements को फ़िल्टर करने के लिए उपयोग किया जाता है।
<html>
<head>
<title>JQuery Traversing Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$(".children").append('(Selected Selector)');
//here you have selected children as your selector. check the effect below
});
</script>
<style>
.traversing {
background: gray;
padding: 12px;
width:350px;
height:350px;
}
.grandparent_parents {
background: yellow;
padding: 12px;
width:260px;
height:260px;
}
.grandparent {
background: green;
padding: 12px;
width:250px;
height:250px;
}
.parent {
background: white;
padding: 12px;
width:160px;
height:160px;
}
.children {
background: brown;
padding: 12px;
width:120px;
height:120px;
}
</style>
</head>
<body>
<div class="traversing">
<div class="grandparent_parents">Great Grand Parent
<div class="grandparent">Grand Parent
<div class="parent">Parent
<div class="children">Children
</div>
</div>
</div>
</div>
</div>
</body>
</html>