Problemi con i selettori jQuery e “è”

StackOverflow https://stackoverflow.com/questions/888853

Domanda

Sto avendo difficoltà a comprendere il motivo per cui un particolare di selezione non funziona per me. Devo ammettere che sono un po 'di un novizio JQuery.

Questo seleziona correttamente il prima div.editbox sulla pagina e colori di giallo: 

$('div.editbox:first').css("background-color","yellow");

Tuttavia, questo costrutto if ... is fa apparire il bordo evidenziato per ogni come è moused-over. 

$('div.editbox').bind('mouseover', function(e) {
    if ($(this).is('div.editbox:first')) {$(this).css("border", "1px solid red");}
});

Ho provato varianti come '.editbox: prima', '.editbox div: prima', ecc

In sostanza, voglio essere in grado di testare in modo affidabile se questo è il primo o l'ultimo elemento con il nome della classe.

Grazie!

Edit: ecco il codice HTML che sto usando: 

<body>
<div class="container">
<p></p>
<div class="editbox" id="box1">Foo</div>
<div class="editbox" id="box2">Bar</div>
<div class="editbox" id="box3">Baz</div>
<div class="responsebox" id="rbox"></div>
</div>
</body>

Questa è solo una pagina proof-of-concept; pagina effettiva sarà ovviamente molto più complessa. Ancora una volta: quello che voglio è quello di rilevare in modo affidabile se io sono nel primo o l'ultimo "div.editbox". Una soluzione che ho usato è: 

$('div.editbox:last').addClass("lasteditbox");

Poi prova per if ($(this).is(".lasteditbox")) che funziona, ma sembra goffo e sto cercando di imparare il modo corretto di fare questo con JQuery.

È stato utile?

Soluzione

UPDATE:. Questo funziona per il primo elemento 

$('div.editbox').bind('mouseover', function(e) {
 if ($("div.editBox").index(this) == 0) {
      $(this).css("border", "1px solid red");
    }
});

E per l'ultimo elemento, questo selettore funziona: 

if($("div.editBox").index(this) == ($("div.editBox").length-1)){
     $(this).css("color","red");
}

Altri suggerimenti

Se si desidera che il passaggio del mouse su un solo la prima occorrenza della casella di modifica di classe all'interno div 

$('div.editbox:first').mouseover(function() {
   $(this).css("border", "1px solid red");
});

Modifica 

$('div.editbox').mouseover(function() {
   $(this).css("border", "1px solid yellow");
}).filter(':first').mouseover(function(){
  $(this).css("border", "1px solid red");
}).filter(':last').mouseover(function(){
  $(this).css("border", "1px solid blue");
})

u hanno provato 

if ($(this).is(':first')) {$(this).css("border", "1px solid red");}

    $('div.editbox').mouseover(function() {
       //change the css for all the elements
       $(this).css("background-color", "yellow");
    })
    .filter(':first,:last').mouseover(function(){
      //execlude the first and the last
      $(this).css("background-color", "Blue");
    })
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top