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
, so I have 2 squares to
li & gt; ; A href = "#" & gt; G & lt; / A & gt; & Lt; / Li & gt; & 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
Post a Comment