Related Topics
JQuery
MongoDB
Node JS
JQuery
<div class="parent">
<div class="sibling">Sibling 1</div>
<div class="selected">Selected Element</div>
<div class="sibling">Sibling 2</div>
<div class="sibling">Sibling 3</div>
</div>
JavaScript (jQuery):
var selectedElement = $(".selected");
var siblings = selectedElement.siblings();
console.log(siblings.length); // Output: 3
var nextSibling = selectedElement.next();
console.log(nextSibling.text());
In the above example, we have a parent <div> element that contains multiple sibling elements. The element with the class “selected” is the one we are starting with.
Using siblings(), we select all sibling elements of the selected element. This returns all three sibling elements with the classes “sibling”. The length of the siblings collection is 3.
Using next(), we select the immediately following sibling element of the selected element. This returns the first sibling element with the class “sibling”. The nextSibling variable holds the jQuery object representing this element.
Keep in mind that if there were additional sibling elements after the selected element, the next() method would only return the first one that immediately follows.
<a href="https://example.com" target="_blank">Link 1</a>
<a href="https://google.com" target="_blank">Link 2</a>
<a href="https://example.com" target="_self">Link 3</a>
JavaScript (jQuery):
var links = $("a[href^='https://example.com']");
console.log(links.length);
links.addClass("highlight");
In this example, we have three <a> elements with different href and target attributes. We want to select the links that have an href attribute value starting with “https://example.com“.
To accomplish this, we use the attribute selector [attribute^='value'], where attribute is the attribute name (href in this case), and value is the desired attribute value to match. The caret (^) indicates that the attribute value should start with the specified value.
The attribute selector $("a[href^='https://example.com']") selects all <a> elements with an href attribute that starts with “https://example.com“. This matches the first and third links in our HTML.
We then store the selected elements in the links variable, which holds a jQuery object representing the selected elements. We can perform various operations on this object, such as adding a CSS class using addClass("highlight").
After executing the code, the first and third links will have the “highlight” CSS class added to them.
<div id="parent">
<div class="child">Child 1</div>
<div class="child">Child 2</div>
<div class="child">Child 3</div>
</div>
JavaScript (jQuery):
var parent = $("#parent");
// Parent/Ancestor Traversal
var directParent = $(".child").parent();
console.log(directParent.attr("id")); // Output: "parent"
var ancestors = $(".child").parents();
console.log(ancestors.length); // Output: 1 (the direct parent)
var closestAncestor = $(".child").closest("#parent");
console.log(closestAncestor.attr("id")); // Output: "parent"
// Child/Descendant Traversal
var children = parent.children();
console.log(children.length); // Output: 3
var descendants = parent.find(".child");
console.log(descendants.length); // Output: 3
// Sibling Traversal
var siblings = $(".child").siblings();
console.log(siblings.length); // Output: 0 (no other siblings in this example)
var nextSibling = $(".child").next();
console.log(nextSibling.text()); // Output: "Child 2"
var prevSibling = $(".child").prev();
console.log(prevSibling.text()); // Output: "Child 1"
var nextSiblings = $(".child").nextAll();
console.log(nextSiblings.length); // Output: 1 (the last child)
var prevSiblings = $(".child").prevAll();
console.log(prevSiblings.length); // Output: 2 (the first and second child)
// Filtering Traversal
var filtered = $(".child").filter(":even");
console.log(filtered.length); // Output: 2 (the first and third child)
var notFiltered = $(".child").not(":first");
console.log(notFiltered.length); // Output: 2 (the second and third child)
In the above example, we have a parent <div> element with three child elements. We use various traversal methods to navigate the DOM hierarchy.
For example, parent.children() selects all direct child elements of the parent, parent.find(".child") selects all descendant elements with the class “child”, and $(".child").parent() selects the direct parent of the child elements.
Similarly, other traversal methods are used to select
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript (jQuery):
// Select all list items
var listItems = $("#myList li");
// Iterate over each list item and perform a function
listItems.each(function(index) {
var itemText = $(this).text();
console.log("Item " + (index + 1) + ": " + itemText);
});
In this example, we have an unordered list (<ul>) with three list items (<li>). We want to iterate over each list item and perform a function that logs the index and text content of each item.
First, we select all the list items using the selector $("#myList li") and store them in the listItems variable. This returns a jQuery object representing the collection of list items.
Then, we use the each() method on the listItems object. Inside the each() function, we define a callback function that will be executed for each list item. The callback function takes two parameters: index (the current index of the element in the collection) and element (the current element being iterated).
Within the callback function, we use $(this) to refer to the current list item being iterated. We retrieve its text content using $(this).text() and log it along with the index using console.log().
When the code is executed, it will iterate over each list item, logging its index and text content in the console. The output will be:
Item 1: Item 1
Item 2: Item 2
Item 3: Item 3
The each() method provides a convenient way to perform operations on each element of a collection individually, allowing you to apply custom logic or manipulate the elements as needed.
<div id="parent">
<div id="child">Child Element</div>
</div>
JavaScript (jQuery):
var childElement = $("#child");
var parentElement = childElement.parent();
console.log(parentElement.attr("id"));
In this example, we have a parent <div> element with an id of “parent” and a child <div> element with an id of “child”. We want to select the parent element of the child element.
First, we select the child element using the $("#child") selector and store it in the childElement variable. This returns a jQuery object representing the child element.
Then, we use the parent() method on the childElement object to select its direct parent element. The parent() method traverses up the DOM hierarchy to select the parent element.
Finally, we can access the attributes or perform further operations on the parentElement object. In this example, we retrieve the id attribute of the parent element using parentElement.attr("id") and log it to the console.
The output will be:
parent
Note that the parent() method selects only the direct parent element. If you need to select higher-level ancestors or traverse multiple levels up the DOM hierarchy, you can use the parents() method or the closest() method with an appropriate selector or filter.
Popular Category
Topics for You
MongoDB
Node JS
Go through our study material. Your Job is awaiting.