JavaScript DHTML/jQuery/UL LI — различия между версиями

Версия 10:02, 26 мая 2010

Содержание

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

 

<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>
    <ul id="uiID">
      <li>Red</li>
      <li>Blue</li>
      <li>Green</li>
      <li id="liID">Yellow</li>
      <li>Orange</li>
      <li>Purple</li>
    </ul>
  </body>
</html>

Add class to previous li

 

<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>
    <ul id="uiID">
      <li>Red</li>
      <li>Blue</li>
      <li>Green</li>
      <li id="liID">Yellow</li>
      <li>Orange</li>
      <li>Purple</li>
    </ul>
  </body>
</html>

Add style to li under a UL with certain id

 

<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>
    <ul id="myStyle">
        <li><a href="http://www.wbex.ru">wbex</a></li>
        <li><a href="http://www.apple.ru">Apple</a></li>
        <li><a href="http://www.jquery.ru">jQuery</a></li>
    </ul>
  </body>
</html>

All from next li

 

<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>
    <ul id="uiID">
      <li>Red</li>
      <li>Blue</li>
      <li>Green</li>
      <li id="liID">Yellow</li>
      <li>Orange</li>
      <li>Purple</li>
    </ul>
  </body>
</html>

All li under ul but not a class name

 

<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">
    <ul id="uiID">
      <li class="liClass1">A</li>
      <li class="liClass1">B</li>
      <li class="liClass1">C</li>
      <li class="liClass1">D</li>
      <li class="liClass2">E</li>
      <li class="liClass2">F</li>
      <li class="liClass2">G</li>
      <li class="liClass2">H</li>
      <li class="liClass3">I</li>
      <li class="liClass3">J</li>
    </ul>
  </body>
</html>

All previous from a LI tag

 
<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>
    <ul id="uiID">
      <li>Red</li>
      <li>Blue</li>
      <li>Green</li>
      <li id="liID">Yellow</li>
      <li>Orange</li>
      <li>Purple</li>
    </ul>
  </body>
</html>

Click to select or unselect li item

 

<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>
    <ul>
      <li>A</li>
      <li>B</li>
      <li>C</li>
      <li>D</li>
      <li>E</li>
      <li>F</li>
    </ul>
    <p>
      Select All
    </p>
  </body>
</html>

Click to toggle highlight on the list item.

  

<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>
         <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
         </ul>
       
                         
    </body>
</html>

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

  
<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("<span> - 2nd!</span>");
        });
    </script>
  </head>
  <body>
    <body>
      <div>
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
      </div>
      <div>
        <ul>
            <li>D</li>
            <li>E</li>
            <li>F</li>
            <li>G</li>
            
        </ul>
      </div>
      <div>
        <ul>
            <li>H</li>
            <li>I</li>
            <li>J</li>
            <li>K</li>
        </ul>
      </div>
    </body>
</html>

Get LI one by one

     
<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 = $("<li>").text($(this).text()).get(0);
              $(replacement).text($(replacement).text().toUpperCase());
              return replacement;
           });
           $("#results").append(mappedItems);
        });
    </script>
  </head>
  <body>
    <body>
      <ul>
        <li>asdf</li>
        <li>asdf</li>
        <li>asdf</li>
      </ul>
      <ul id="results">
      </ul>
  </body>
</html>

Get parent for LI

 
<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">
    
    <div id="uiIDWrapper">
      <ul id="uiID">
        <li>A</li>
        <li class="liClassName">B</li>
        <li class="liClassName">C</li>
        <li>D</li>
        <li class="liClassName2">E</li>
        <li>F</li>
        <li class="liClassName3">G</li>
      </ul>
    </div>
  </body>
</html>

Select Li by class style name nested ul with id

 
<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>
    <ul id="tmpPlaces">
      <li>a</li>
      <li>b</li>
      <li>c</li>
      <li>d</li>
      <li>e</li>
      <li>f</li>
      <li class="myStyle">g</li>
    </ul>
  </body>
</html>

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

  

<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($("<span>*</span>"));
              }, 
              function () {
                $(this).find("span:last").remove();
              }
            );

        });
    </script>
  </head>
  <body>
    <body>
         <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
            <li>D</li>
         </ul>
       
                         
    </body>
</html>

JavaScript DHTML/jQuery/UL LI — различия между версиями

Версия 10:02, 26 мая 2010

Содержание

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

Навигация

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

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

Варианты

Просмотры

Ещё

Поиск

Разделы

Навигация

Инструменты

Текущая версия на 07:24, 26 мая 2010 (просмотреть исходный код) Admin (обсуждение \| вклад) м (1 версия)	Версия 10:02, 26 мая 2010 (просмотреть исходный код) (обсуждение) Следующая правка →
(нет различий)