jquery and JS get ul in Li tags

Source: Internet
Author: User

JS gets the element under all Li

var Content=document.getelementbyid ("content");
var items=content.getelementsbytagname ("ul");
var itemss=items[2].getelementsbytagname ("Li");//Get a second Li tag

Or

var Div=document.getelementbyid (' a ');
var ul=div.childnodes.item (0);
var lis=ul.childnodes;
for (Var i=0;i<lis.length;i++) {
Alert ("Item" +i+ ":" +lis.item (i). InnerHTML);
} How to use jquery to get the last Li under each UL

$(function(){

$( "ul" ).each( function (){      var y = $( this ).children(). last ();      alert(y.text()); }); });jquery Get <ul> Click the one that <li> <ul class= "Anserdh" id= "Topmenu" >

<li class= "QHBG" ><a href= "" > Standings </a></li>
<li><a href= "" > Answer list </a></li>
<li><a href= "" > Question list </a></li>
<li><a href= "" > Satisfaction list </a></li>
</ul>

Click on that to put in that <li> append class= "QHBG" style

For example: Click on the answer list to become

<ul class= "Anserdh" id= "Topmenu" >
<li ><a href= "" > Standings </a></li>
<li class= "QHBG" ><a href= "" > Answer list </a></li>
<li><a href= "" > Question list </a></li>
<li><a href= "" > Satisfaction list </a></li>
</ul>

$ (function () {

$ ('. Anserdh li a '). Click (function () {
$ ('. Anserdh li '). Removeclass (' QHBG ');
$ (this). Parent (). addclass (' QHBG ');

})

})

How jquery locates the second-to-last element, such as a DIV with 5 ul, how does jquery lock to the bottom of the first UL, the second UL, the first UL style
$ ("Div ul"). EQ (-1)
$ ("Div ul"). EQ (-2)

  $(‘ul li:first-child‘).css(‘backgroundColor‘‘#000‘);

In jquery. each () iterates through the elements of some learning

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

The result of the test is normal, and later in an actual use of the page, when found in the above list of Li changes, the following Div block does not follow the change of different chunks, the CSS style and the actual use of the page in the other style conflicts, the CSS selector all changed to unique after the Finding this is still the problem, so the judgment should be here:

$ ("#title. Titsh"). Removeclass ("Titsh"); $ ("#content. Consh"). Removeclass ("Consh"); $ (this). addclass ("Titsh"); $ ("# Content>div:eq ("+index+") "). AddClass (" Consh ");

The first sentence, the second sentence to take out the style, no problem, the third inning to the current Li tag plus titsh CSS style is also normal, is the last sentence to be obtained by DIV:EQ (index) to the DIV block plus style when the failure.

So I was
$ ("Li"). each (function (index) {$ (this). MouseOver (function () {
The two sentences add an alert (index) Pop-up window, look at the effect, found that there are 10 of several Li tag index values are alert out, think of the original actual page there are other Li tags, so that each () iteration of the index value and the following Div block index value does not match, So when the above Li tag changes, the following Div block will not change, so I will JS code changed a bit:
  <script type= "Text/javascript" >    $ (function () {          $ ("#title ul Li"). each (the function (index) {            $ (this). Click (function () {              $ ("#title. Titsh"). Removeclass ("Titsh");              $ ("#content. Consh"). Removeclass ("Consh");              $ (this). addclass ("Titsh");              $ ("#content > Div:eq (" +index+ ")"). AddClass ("Consh");})}                        )  </script>

To use the. each () iteration of the LI element selector limit, so that he can only find my tab in the LI tag to each out index value, problem solving, can sleep!

jquery and JS get ul in Li tags

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.