Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery selector: select list individually with jquery

    hi,

    how can i select the individual list with jquery, for instance,

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>

    i can select them individually with normal javascript like this,
    Code:
    var links = element.getElementsByTagName("li");
    links[1].onmouseover = function(){
    	...
    	}
    
    links[2].onmouseover = function(){
    	...
    	}

    but this one below will select all the list at once...

    Code:
    $('li').hover(function(e){
    ...
    });
    please let me know if u have any ideas.
    many thanks,
    Lau

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Shouldn't you use - .each ?

  • #3
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Please elaborate on how it is important to assign those event handlers individually. What will go inside those functions? I'm sure there's a better way than handling every list item separately.

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by venegal View Post
    What will go inside those functions?
    I have no idea. I don't know what you're attempting to do.

    But a jQuery array is an array of objects, as I understand it. And "each" will step through those applying the very same function - to each. But I don't know what your function would be. Only you know that.

    This is another of these jQuery questions that was posted to a Javascript forum when there is a Javascript Framework forum available. Maybe it should be called - Javascript Libraries. Maybe there should be a separate jQuery forum?

  • #5
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    Actually I'm not the OP. I felt your recommendation of using "each" didn't take into account the OP's whish to handle individual list items, so I asked him why he even needed to do so, so he won't end up writing all over the place copypasted code for each item when he could in fact handled them all at once.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,478
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by lauthiamkok View Post
    hi,

    how can i select the individual list with jquery, for instance,

    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>

    i can select them individually with normal javascript like this,
    Code:
    var links = element.getElementsByTagName("li");
    links[1].onmouseover = function(){
    	...
    	}
    
    links[2].onmouseover = function(){
    	...
    	}

    but this one below will select all the list at once...

    Code:
    $('li').hover(function(e){
    ...
    });
    please let me know if u have any ideas.
    many thanks,
    Lau
    Please give us a link to your page or your entire source code (HTML/CSS/JS). This helps tremendously finding the issue. From looking at the snippet there doesn’t seem to be anything wrong (at least to my eyes – I’m not a JS pro)

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    Please give us a link to your page or your entire source code (HTML/CSS/JS). This helps tremendously finding the issue. From looking at the snippet there doesn’t seem to be anything wrong (at least to my eyes – I’m not a JS pro)
    hi all, thanks for all the advice and tips, here is the link to my page,

    http://lauthiamkok.net/tmp/gtclients/1/

    if u look carefully there are two types of contents. one is just swapping images, and another is loading text and pictures. so i differentiate the buttons with pinky overlay for the latter.

    I think i have a solution but maybe u have a better one - i just add a class into the ones which need to be differentiate, for instance, in my case,

    <li>1</li>
    <li class="padlock">2</li>
    <li>3</li>

    u can read this in details if u browse the code on your browser.

    cheers,
    L

  • #8
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    if jquery is confusing, have a look at these easy to follow helpers

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8" />
    <title>testt</title>
    <style type="text/css">
    <!--
    body {
    	
    }
    -->
    </style></head>
    
    <body onload="calculate();load()">
    
    <form id="form1" action="" >
    <b>First value:</b> 
    <input type="text" name="firstname" id="num1">
    <br>
    Last value: 
    
    
    <input type="text" name="lastname" id="num2">
    <br>
    Operator use + - * / % ^ ( ) : 
    <input type="text" name="operation" id="oper">
    </form>
    
    <input type="button" value="calculate" onclick="setTimeout(calculate(),10000)"><div id="output"></div>
    <br><a href="">link</a><br><a href="">link</a><br><a href="">link</a><br><a href="">link</a><br><a href="">link</a><br><a href="">link</a>
    
    <script type = "text/javascript">
    										/*global helper functions*/
    
    
     										/*returns value from specified input elmId__________
    										example______var newVal1 = Number( D_id_value( "num1" ) )*/
    D_id_value   = function(elmId){ return document.getElementById(elmId).value } 
    
    										/*returns a reference to the specified elmId_____
    										example______var numValue1 = D_id("num1"); */
    D_id         = function(elmId){ return document.getElementById(elmId) }
     
    										/*returns a reference to the specified array________
    										example___________D_Tags('input')[0].style.color='white';*/
    D_Tags       = function(elmTag){ return document.getElementsByTagName(elmTag)}
    
    										/*returns a reference to the specified array position_____________
    										example________ D_Tags_which('input',1).style.color='red'*/
    D_Tags_which = function(elmTag,num){ return document.getElementsByTagName(elmTag)[num]}
    
     										/*returns the Array specified with the instructions carried out ___________
    										 example_______ for (i=0;i<4;i++) D_Tags_Do('a',i,'style','color:red')*/
    D_Tags_Do= function(elmTag,curr,arg,set){ return document.getElementsByTagName(elmTag)[curr].setAttribute(arg,set)}
    
     
    
    function calculate(){
    
    var numValue1 = D_id("num1"); 
      	var myText = numValue1.value; 
        			var num1 = Number(myText);
    
    var numValue2 = D_id("num2"); 
      var myText = numValue2.value; 
        var num2 = Number(myText);
    
    var operator  = D_id("oper").value;
    
    var realNumber = eval(num1+operator+num2); 
    
    D_id('output').textContent=realNumber
    
    with(D_id('output').style){backgroundColor='green';color='white'}
    
    	var newVal1 = Number( D_id_value( "num1" ) );
    
    	var newVal2 = Number( D_id_value( "num2" ) );
    
    	var operator2=D_id_value("oper"); 
    
    	var realNumber2 = eval(newVal1+operator2+newVal2); 	/*debug alert(realNumber2)*/
    
    with(D_id('form1').style){
    			backgroundColor='blue'
    			 }
    	
    for (i in D_Tags('input')){
    
    			if(i<2){
    				D_Tags('input')[i].style.color='white';
    				D_Tags('input')[i].style.backgroundColor='red'
    				}
    
    			if(i==2){
    				changeBGColor(2,'green');
    				changeFontColor(2,'white')
    				}
    			if(i==3){
    				changeBGColor(3,'white');
    				changeFontColor(3,'blue')
    				}
    
    };
    
    }
    		changeFontColor= function(whichone,color){D_Tags_which('input',whichone).style.color=color}
    
    		changeBGColor  = function(whichone,color){D_Tags_which('input',whichone).style.backgroundColor=color}
    
    function load(){ for (i=0;i<4;i++) D_Tags_Do('a',i,'style','color:red') }
    </script>
    
    
    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •