JQuery :l'aggiunta di 5 id "al volo" (invece di classi)

Question

Ho a che fare con questa situazione :

• Ho un colore script di animazione che gli obiettivi da id (non si tratta di JQuery, ma puro javascript)
• poi ho un elenco dinamico senza id :'ul' somePHP lancio di elementi di una lista '/ul'
• e finalmente ho JQuery (che io uso per aggiungere diversi id "al volo" per le voci di elenco:ma io ancora non so come)

Ho capito che non potevo aggiungere, con JQuery, singole classi per gli elementi di una lista, così come il colore solo plugin di ricerca per id (utilizza getElementById, che non hanno un parallelo con le classi).

Devo escludere in modo che il addClass JQ funzione, che sarebbe abbastanza facile da mettere in opera.

Solo lo script funzionerebbe se potevo inserire id nell'elenco, 5 ben definito id, e di dare seguito alcune istruzioni nel esternalizzati colore plugin per li riguardano :

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

Quindi, le istruzioni :

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.

Potrei modificare il plugin javascript, ma ho pensato che sarebbe stato più facile con l'utilizzo di JQuery per aggiungere, in qualche modo, id nel mio html.

Il colore plugin è un fantastico pezzo di codice scritto da Michael Leigeber Ho riprodurre come segue :

// 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;
}

Così, un milione di grazie se qualcuno mi può dire come aggiungere gli id su la mosca, o, forse, come modificare il codice javascript di destinazione classi,

Molte grazie,

Jan

Answer 1

Quindi hai una ordinaria <ul></ul> e voglio dare ad ogni <li> in un id univoco?Provare jQuery comando "ogni":

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

Questo ciclo su tutti <li> elementi e assegnare ogni elemento la sua nummerical (indice nell'array di elementi jQuery ha trovato) come attributo id.

Answer 2

Se si utilizza jquery è possibile ottenere un elemento di classe utilizzando una sintassi simile a questa (supponendo che la classe css è chiamato "className":

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

per fare la stessa cosa con un id, in questo modo in jquery:

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