jquery and JS Get the realization method of Li tag in ul _jquery

Source: Internet
Author: User

JS gets the elements underneath all the LI

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

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 each ul under the last Li

$ (function () {

$ ("ul"). each (function () {
  var y = $ (). Children (). Last ();
  Alert (Y.text ());
});
};

jquery gets <ul> clicks is 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= "> Questions list </a></li>
   <li><a href= "" > Satisfaction list </a></li>
</ul>

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

For example: Click on the answer list to become

 <ul class= "Anserdh" id= "Topmenu" >
   <li ><a href= "" > Score list </a></li>
   <li class= " QHBG "><a href=" "> Answer list </a></li>
   <li><a href=" "> Questions 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 ');

  })


jquery How to locate the penultimate element, such as a DIV has 5 ul, how can jquery lock to the countdown to 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 () Some learning to traverse elements

<! 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, later in an actual use of the page used, found above the Li list changes, the following Div block does not follow the changes in the block, the CSS style and the actual use of the other styles of the page conflict, the CSS selector all changed to unique after, The discovery is still the question, 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 out of the style, no problem, the third Bureau to the current Li tag plus titsh CSS style is also normal, is the last sentence to get through Div:eq (index) to obtain the DIV block add style when the failure.

So I was

$ ("Li"). each (the function (index) {
$ (this). MouseOver (function () {

There is an alert (index) window between these two sentences, look at the effect, found that there are 10 of several Li tags index value is alert out, a thought that 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 correspond, So above the LI tag changes, the following Div block will not follow the change, so I changed the JS code:

<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>

The selector of the LI element to use. Each () is added with restrictions so that he can only find the LI tag in my tab to each of the index values, solve the problem, you can sleep!

The above jquery and JS to obtain the UL in the LI Tag implementation method is small series to share all the content, hope to give you a reference, but also hope that we support cloud habitat community.

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.