JavasScript Siblings

Javascript இல் nextElementSibling மற்றும் previousElementSibling ஆகியன ஒரே parent க்கு உரிய siblings element ஐ கண்டறிய பயன்படுகிறது.

currentNode.previousElementSibling; currentNode.nextElementSibling;

Note: இங்கு ஒரே parent க்கு உரிய siblings element களை கண்டறிய பயன்படுகிறது. அவற்றை கண்டறிவதற்கு nextElementSibling மற்றும் previousElementSibling ஆகிய முறைகள் பயன்படுகிறது. இந்த siblings method ஆனது மிகவும் பயனுள்ள method ஆகும்.

Example1


<!DOCTYPE html>
<html lang="en">
<body>
        <ul id="menu">
                <li>Home</li>
                <li>Products</li>
                <li class="current">Siblings</li>
                <li>Careers</li>
                <li>Investors</li>
                <li>News</li>
                <li>About Us</li>
        </ul>
        <script>
                let current = document.querySelector('.current');
                let previous_Sibling = current.previousElementSibling;
                console.log(previous_Sibling);
        </script>
</body>
</html>

மேலே உள்ள Example1-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு querySelector('.current') மூலமாக class name current என்ற value கொண்ட li என்ற tag ஆனது select செய்யப்பட்டுள்ளது. பிறது அந்த element current என்ற variable இல் store செய்யப்பட்டு உள்ளது. current.previousElementSibling என கொடுக்கும் போது அதற்கு முந்திய sibling tag element ஆனது நமக்கு கிடைக்கிறது இங்கு முக்கியமாக அந்த same parent கொண்ட element ஆக இருக்க வேண்டும். console.log இல் output ஆனது கிடைக்கிறது.

Output: 

<li>Products</li>

Example2


<!DOCTYPE html>
<html lang="en">
<body>
        <ul id="menu">
                <li>Home</li>
                <li>Products</li>
                <li class="current">Siblings</li>
                <li>Careers</li>
                <li>Investors</li>
                <li>News</li>
                <li>About Us</li>
        </ul>
        <script>
                let next = document.querySelector('.current');
                let next_Sibling = next.nextElementSibling;
                console.log(next_Sibling);
        </script>
</body>
</html>

மேலே உள்ள Example2-ஐ கவனிக்கவும் இங்கு html tag கள் கொடுகப்பட்டுள்ளது. இங்கு querySelector('.current') மூலமாக class name current என்ற value கொண்ட li என்ற tag ஆனது select செய்யப்பட்டுள்ளது. பிறது அந்த element next என்ற variable இல் store செய்யப்பட்டு உள்ளது. next.nextElementSibling என கொடுக்கும் போது அதற்கு அடுத்ததாக இருக்கும் sibling tag element ஆனது நமக்கு கிடைக்கிறது இங்கு முக்கியமாக அந்த same parent கொண்ட element ஆக இருக்க வேண்டும். console.log இல் output ஆனது கிடைக்கிறது.

Output: 

<li>Careers</li>

Comments