JavaScript DHTML/jQuery/UL LI

Содержание

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

Add class to next li

   <source lang="html4strict">

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

Add class to previous li

   <source lang="html4strict">

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

Add style to li under a UL with certain id

   <source lang="html4strict">

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

All from next li

   <source lang="html4strict">

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

All li under ul but not a class name

   <source lang="html4strict">

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

All previous from a LI tag

   <source lang="html4strict">

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

Click to select or unselect li item

   <source lang="html4strict">

<html>

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

$.fn.extend({

 Select: function() {
   return $(this).addClass("mySelected");
 },
 Unselect: function() {
   return $(this).removeClass("mySelected");
 },
 MyApplication: {
   Ready: function() {
     $("p").click(
       function($e) {
         $("li").Select();
       }
     );
     $("li").click(
       function() {
         $(this).hasClass("mySelected")?$(this).Unselect() : $(this).Select();   
       }
     );
   }
 }

}); $(document).ready(

 function() {
   $.fn.MyApplication.Ready();
 }

);

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

li.mySelected {

   background: yellow;

}

   </style>
 </head>
 <body>

A
B
C
D
E
F

Select All

 </body>

</html>

 </source>

Click to toggle highlight on the list item.

   <source lang="html4strict">

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

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

   <source lang="html4strict">

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

Get LI one by one

   <source lang="html4strict">

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

Get parent for LI

   <source lang="html4strict">

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

Select Li by class style name nested ul with id

   <source lang="html4strict">

<html>

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

var tmpExample = {

 ready : function() {
   $("ul#tmpPlaces li.myStyle").siblings().addClass("tmpSiblings");
 }

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

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

body {

   font: 16px sans-serif;

} h4 {

   font-size: 16px;
   margin: 0 0 5px 0;

} ul#tmpPlaces {

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

} ul#tmpPlaces li {

   margin: 1px;
   padding: 3px;

} li.tmpSiblings{

   background: khaki;

}

   </style>
 </head>
 <body>

a
b
c
d
e
f
g

 </body>

</html>

 </source>

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

   <source lang="html4strict">

<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 DHTML/jQuery/UL LI

Содержание

Add class to next li

Add class to previous li

Add style to li under a UL with certain id

All from next li

All li under ul but not a class name

All previous from a LI tag

Click to select or unselect li item

Click to toggle highlight on the list item.

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

Get LI one by one

Get parent for LI

Select Li by class style name nested ul with id

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

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты