JavaScript Tutorial/jQuery/UL LI

Содержание

1 30. Add class to all children from UL
2 30. Add class to next li
3 30. Add class to previous li
4 30. Add style to li under a UL with certain id
5 30. All from next li
6 30. All li under ul but not a class name
7 30. All previous from a LI tag
8 30. Click to toggle highlight on the list item.
9 30. Finds the second li in each matched ul and notes it.
10 30. Get LI one by one
11 30. Get parent for LI
12 30. To add a special style to list item that are being hovered over

30. Add class to all children from UL

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("ul").children().addClass("tmpChild");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul {

   list-style: none;
   margin: 0;
   padding: 0;

} ul li {

   margin: 1px;
   padding: 3px;

} li.tmpChild {

   background: #cf0c35;
   color: white;

}

   </style>
 </head>
 <body>

A
B
C
D
E
F

 </body>

</html></source>

30. Add class to next li

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("li#liID").next().addClass("mySiblings");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.mySiblings {

   background: #165b91;
   color: white;

}

   </style>
 </head>
 <body>

Red
Blue
Green
Yellow
Orange
Purple

 </body>

</html></source>

30. Add class to previous li

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("li#liID").prev().addClass("mySiblings");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.mySiblings {

   background: #165b91;
   color: white;

}

   </style>
 </head>
 <body>

Red
Blue
Green
Yellow
Orange
Purple

 </body>

</html></source>

30. Add style to li under a UL with certain id

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("ul#myStyle").find("li").addClass("tmpFound");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#myStyle {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#myStyle li {

   margin: 1px;
   padding: 3px;

} li.tmpFound {

   background: red;

}

   </style>
 </head>
 <body>
 <body>

<a href="http://www.wbex.ru">wbex</a>
<a href="http://www.apple.ru">Apple</a>
<a href="http://www.jquery.ru">jQuery</a>

 </body>

</html></source>

30. All from next li

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("li#liID").nextAll().addClass("mySiblings");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.mySiblings {

   background: #165b91;
   color: white;

}

   </style>
 </head>
 <body>

Red
Blue
Green
Yellow
Orange
Purple

 </body>

</html></source>

30. All li under ul but not a class name

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("ul#uiID li").not("li.liClass2").addClass("justAdd");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.justAdd {

   background: rgb(112, 122, 122);

}

   </style>
 </head>
 <body id="tmpExample">

A
B
C
D
E
F
G
H
I
J

 </body>

</html></source>

30. All previous from a LI tag

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var tmpExample = {

 ready : function() {
   $("li#liID").prevAll().addClass("mySiblings");
 }

}; $(document).ready(tmpExample.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} li.mySiblings {

   background: #165b91;
   color: white;

}

   </style>
 </head>
 <body>

Red
Blue
Green
Yellow
Orange
Purple

 </body>

</html></source>

30. Click to toggle highlight on the list item.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("li").toggle(
             function () {
               $(this).css("list-style-type", "disc")
                      .css("color", "blue");
             },
             function () {
               $(this).css({"list-style-type":"", "color":""});
             }
           );

       });
   </script>
 </head>
 <body>
   <body>

A
B
C
D

   </body>

</html></source>

30. Finds the second li in each matched ul and notes it.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               $("ul li:nth-child(2)").append(" - 2nd!");
       });
   </script>
 </head>
 <body>
   <body>

A
B
C

D
E
F
G

H
I
J
K

   </body>

</html></source>

30. Get LI one by one

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
          var mappedItems = $("li").map(function (index) {

var replacement = $("

").text($(this).text()).get(0); $(replacement).text($(replacement).text().toUpperCase()); return replacement; }); $("#results").append(mappedItems); }); </script> </head> <body> <body>

asdf
asdf
asdf

 </body>

</html></source>

30. Get parent for LI

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">

var myDemo = {

 ready : function() {
   $("li.liClassName3").parents("div#uiIDWrapper").addClass("tmpParent");
 }

}; $(document).ready(myDemo.ready);

   </script>
   <style type="text/css">

ul#uiID {

   list-style: none;
   margin: 0;
   padding: 0;

} ul#uiID li {

   margin: 1px;
   padding: 3px;

} div#uiIDWrapper {

   padding: 5px;
   border: 1px solid rgb(200, 200, 200);    
   background: rgb(240, 240, 240);

} body#myDemo div.tmpParent {

   background: rgb(174, 211, 248);

}

   </style>
 </head>
 <body id="myDemo">

A
B
C
D
E
F
G

 </body>

</html></source>

30. To add a special style to list item that are being hovered over

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
               
           $("li").hover(
             function () {
               $(this).append($("*"));
             }, 
             function () {
               $(this).find("span:last").remove();
             }
           );

       });
   </script>
 </head>
 <body>
   <body>

A
B
C
D

   </body>

</html></source>

JavaScript Tutorial/jQuery/UL LI

Содержание

30. Add class to all children from UL

30. Add class to next li

30. Add class to previous li

30. Add style to li under a UL with certain id

30. All from next li

30. All li under ul but not a class name

30. All previous from a LI tag

30. Click to toggle highlight on the list item.

30. Finds the second li in each matched ul and notes it.

30. Get LI one by one

30. Get parent for LI

30. To add a special style to list item that are being hovered over

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты