PDA

View Full Version : jquery selector: select list individually with jquery

lauthiamkok
07-16-2009, 04:43 PM
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,
var links = element.getElementsByTagName("li");
links[1].onmouseover = function(){
...
}

links[2].onmouseover = function(){
...
}


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

$('li').hover(function(e){
...
});

please let me know if u have any ideas.
many thanks,
Lau
fside
07-16-2009, 10:54 PM
Shouldn't you use - .each ?
venegal
07-17-2009, 12:19 AM
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.
fside
07-17-2009, 03:58 AM
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?
venegal
07-17-2009, 11:08 AM
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.
VIPStephan
07-17-2009, 11:21 AM
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,
var links = element.getElementsByTagName("li");
links[1].onmouseover = function(){
...
}

links[2].onmouseover = function(){
...
}


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

$('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)
lauthiamkok
07-17-2009, 02:05 PM
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:)
TinyScript
07-17-2009, 03:48 PM
if jquery is confusing, have a look at these easy to follow helpers


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