jQuery selector -


How can I select and add a square to the previous and next tags.

  & lt; Div class = "sub" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; A & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; B & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; C & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; D & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; E & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; F & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; G & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; H & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; I & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Jammu & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; Example: Now I want to add 2 css classes (.preview and nxt), such as element elements that accept the mouse   li & gt; ; A href = "#" & gt; G & lt; / A & gt; & Lt; / Li & gt; , so I have 2 squares to  & lt; Li & gt; & Lt; A href = "#" & gt; I want to add to  and  & lt; Li & gt; & Lt; A href = "#" & gt; H & lt; / A & gt; & Lt; / Li & gt;  

snipp:

  $ (document) .ready (function () {$ ('li'). CSS ({'Border-top': '1px solid green', 'border (' 1px solid green '')); $ ('lia') each (function (intindex) {$ (this). Mouse over (function $ (This) .css ({'border-top': '1px solid red', 'border bottom': '1px solid red'}); $ (this) .prev () Find ('li' CSS ({'border-bottom': 'none'}); $ (this) .next (). ('Li'). CSS ({'border-top': 'none'})}}. MouseOut (function {$ (this) .css ({'border-top': '1 px solid green', 'border bottom': '1 px solid green'});});});});  

thanks In advance,

Try it out:

  var $ a = $ ( '. Sub li & gt; a'); $ A.mouseenter (function () {var index = $ a.index (this); var prev = (index - 1> = 0)? $ A.eq ( Index - 1) .addClass ('prev'): $ next ($); var next = $ a.eq (index + 1) .addClass ('next'); $ a.not (prev) .No (forward) .removeClass ('Prev next');});  

Edit: A minor improvement. First, if you were on the first item, then the .prev category will be added to the last item in the list. This has been done right.


Edit: Here is a version that uses the user's .each () . It's a bit more efficient to do this in this way because it eliminates the need to call $ a.index (this); for each mousecenter

Try it:

  var $ a = $ ('. Sub li & gt; a '); $ A.each (function (index) {$ .mouseenter (function () {var prev = (index - 1> = 0)? $ A.eq (index -1) .addClass ('prev'): $ (); Var next = $ a.eq (index + 1) .addClass ('next'); $ a.not (prev) .No (forward) .removeClass ('prev next');})}} ; Edit   Edit:  If you are having any issues with the continuous deletion of the appropriate class, get rid of this line of code:  < Pre>  $ a.not (prev). No (forward) .removeClass ('prev next'); Change it to  

and handler on :

  $ a.removeClass ('Previous Next');  

or:

  $ a.filter ('., Prev, .next'). RemoveClass ('Previous Next');  

Comments

Popular posts from this blog

Eclipse CDT variable colors in editor -

AJAX doesn't send POST query -

wpf - Custom Message Box Advice -