JavaScript Tutorial/jQuery/UL LI — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Текущая версия на 11:25, 26 мая 2010
Содержание
- 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 = $("
- 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>