Problem
A jQuery selector is broad and selects all elements on the page based on your query.The need may rise when you need to select a single item, based on its position, but there isn’t an easy way to select that item without editing the code.
Solution
After you make your selection with jQuery, you can chain the .eq() method and pass in the index of the selection you want to work with.
Let’s use the end of the season standings for the National Hockey League (NHL) conferences as an example of how we can show which teams made the playoffs and which did n’t. What we need to do is list all the teams in each conference in the order they finished the season in. Since the top eight teams in each conference make it to the play off round, we just need to figure out the eighth entry in each list and draw a line:
Figure : shows the code output.
As you can see, we just use an ordered list to list the teams in the order they placed, then we use jQuery to add a bottom border to the eighth item in each list. We need to add an ID to each ordered list so that we can specify each list in a separate query. If we were to do $("li").eq(7);, it would select only from the first list because the query would have counted all the <li>elements on the page together.
Discussion
The .eq() method is used to take a selection set and reduce it to a single item from that set. The argument is the index that you want to reduce your selection to. The index starts at 0 and goes to length −1. If the argument is an invalid index, the method will return an empty set of elements instead of null.
The .eq() method is similar to using the $(":eq()"); right in your selection, but the .eq() method allows you to chain to the selection and fine-tune further. For example:
This will change the background color of all <li>elements and then select the first one and give it a different color to signify that it is perhaps a header item.
|
|
J Query Related Interview Questions |
|
---|---|
HTML 4 Interview Questions | HTML Interview Questions |
HTML 5 Interview Questions | Zend Interview Questions |
PHP and Jquery Interview Questions | HTML+Javascript Interview Questions |
J Query Interview Questions | Javascript Objects Interview Questions |
Javascript Advanced Interview Questions | CodeIgniter Interview Questions |
JqueryUI Interview Questions | Dynamic HTML Interview Questions |
XQuery Interview Questions | jQuery Mobile Interview Questions |
JSON (JavaScript Object Notation) Interview Questions | Advanced jQuery Interview Questions |
J Query Related Practice Tests |
|
---|---|
HTML 4 Practice Tests | HTML Practice Tests |
HTML 5 Practice Tests | Zend Practice Tests |
PHP and Jquery Practice Tests | J Query Practice Tests |
CodeIgniter Practice Tests | Dynamic HTML Practice Tests |
JSON (JavaScript Object Notation) Practice Tests | Advanced jQuery Practice Tests |
All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.