JQuery: ajouter 5 id à la volée (au lieu des classes)

Question

Je fais face à cette situation:

• J'ai un script d'animation de couleur qui cible par id (ce n'est pas JQuery mais pur javascript)
• puis j'ai une liste dynamique sans ID: 'ul' somePHP jetant des éléments de la liste '/ ul'
• et enfin j'ai JQuery lui-même (que je vais utiliser pour ajouter plusieurs ID à la volée pour les éléments de la liste: mais je je ne sais toujours pas comment)

Jev J'ai réalisé que je ne pouvais pas ajouter, avec JQuery, des classes uniques aux éléments de la liste, car le plugin de couleur ne recherche que par id (il utilise getElementById, qui n'a pas de parallèle avec les classes).

Je dois donc exclure la fonction addClass JQ, ce qui serait assez facile à mettre au travail.

seulement Le script fonctionnerait si je pouvais insérer ids dans la liste, 5 ids bien définis, et plus tard, donner des instructions dans le plugin couleur extériorisée les affectent:

<ul> 
    <li><a href="" id="ontheflyone">pulled from the DB</a></li> 
    <li><a href="" id="ontheflytwo">pulled from the DB</a></li> 
    <li><a href="" id="ontheflythree">pulled from the DB</a></li> 
    <li><a href="" id="ontheflyfour">pulled from the DB</a></li> 
    <li><a href="" id="ontheflyfive">pulled from the DB</a></li> 
</ul> 

Ensuite, les instructions suivantes:

document.getElementById(’id’).onmouseover = function() { 'ontheflyone','text','$color1' }; 
document.getElementById(’id’).onmouseout = function() { 'ontheflyone','text','$color2'}; 

document.getElementById(’id’).onmouseover = function() { 'ontheflytwo','text','$color1' }; 
document.getElementById(’id’).onmouseout = function() { 'ontheflytwo','text','$color2'}; 

etc. 

je pourrais changer le javascript du plugin lui-même, mais je pensais que ce serait plus facile en utilisant JQuery d'ajouter, d'une certaine façon, ids dans mon html.

Le plugin couleur est un morceau de code impressionnant écrit par Michael Leigeber je reproduis comme suit:

// main function to process the fade request // 
function colorFade(id,element,start,end,steps,speed) { 
    var startrgb,endrgb,er,eg,eb,step,rint,gint,bint,step; 
    var target = document.getElementById(id); 
    steps = steps || 20; 
    speed = speed || 20; 
    clearInterval(target.timer); 
    endrgb = colorConv(end); 
    er = endrgb[0]; 
    eg = endrgb[1]; 
    eb = endrgb[2]; 
    if(!target.r) { 
    startrgb = colorConv(start); 
    r = startrgb[0]; 
    g = startrgb[1]; 
    b = startrgb[2]; 
    target.r = r; 
    target.g = g; 
    target.b = b; 
    } 
    rint = Math.round(Math.abs(target.r-er)/steps); 
    gint = Math.round(Math.abs(target.g-eg)/steps); 
    bint = Math.round(Math.abs(target.b-eb)/steps); 
    if(rint == 0) { rint = 1 } 
    if(gint == 0) { gint = 1 } 
    if(bint == 0) { bint = 1 } 
    target.step = 1; 
    target.timer = setInterval(function() { animateColor(id,element,steps,er,eg,eb,rint,gint,bint) }, speed); 
} 

// incrementally close the gap between the two colors // 
function animateColor(id,element,steps,er,eg,eb,rint,gint,bint) { 
    var target = document.getElementById(id); 
    var color; 
    if(target.step <= steps) { 
    var r = target.r; 
    var g = target.g; 
    var b = target.b; 
    if(r >= er) { 
     r = r - rint; 
    } else { 
     r = parseInt(r) + parseInt(rint); 
    } 
    if(g >= eg) { 
     g = g - gint; 
    } else { 
     g = parseInt(g) + parseInt(gint); 
    } 
    if(b >= eb) { 
     b = b - bint; 
    } else { 
     b = parseInt(b) + parseInt(bint); 
    } 
    color = 'rgb(' + r + ',' + g + ',' + b + ')'; 
    if(element == 'background') { 
     target.style.backgroundColor = color; 
    } else if(element == 'border') { 
     target.style.borderColor = color; 
    } else { 
     target.style.color = color; 
    } 
    target.r = r; 
    target.g = g; 
    target.b = b; 
    target.step = target.step + 1; 
    } else { 
    clearInterval(target.timer); 
    color = 'rgb(' + er + ',' + eg + ',' + eb + ')'; 
    if(element == 'background') { 
     target.style.backgroundColor = color; 
    } else if(element == 'border') { 
     target.style.borderColor = color; 
    } else { 
     target.style.color = color; 
    } 
    } 
} 

// convert the color to rgb from hex // 
function colorConv(color) { 
    var rgb = [parseInt(color.substring(0,2),16), 
    parseInt(color.substring(2,4),16), 
    parseInt(color.substring(4,6),16)]; 
    return rgb; 
} 

Ainsi, un million merci si quelqu'un peut me dire comment ajouter ces ids à la volée, ou, peut-être, comment changer le javascript pour cibler les classes,

Un grand merci,

Jan

Answer 1

vous avez donc un <ul></ul> ordinaire et que vous voulez donner à chaque <li> en un identifiant unique? Essayez la commande jQuery "each":

$("li").each(function(index, element){$(element).attr("id", index);}); 

Cette boucle de volonté sur tous <li> et attribuer à chaque éléments élément de son indice nummerical (dans le tableau d'éléments jQuery a trouvé) comme attribut « id ».

Answer 2

Si vous utilisez jquery, vous pouvez obtenir un élément par classe en utilisant la syntaxe comme ceci (en supposant que la classe css est appelée « className »:

$(".className").mouseover(function(){ 
    alert("something"); 
}); 

à faire la même chose avec un id que vous feriez cela en jquery :

$("#idVal").mouseover(function(){ 
    alert("something"); 
});