그누보드 - jquery 기본 예제

jquery 기본 예제 정보

jQuery jquery 기본 예제

첨부파일

jquery 기본예제(writen 2007).txt (142.5K) 104회 다운로드 2011-12-06 11:09:15

본문

제가 2007 년에 정리해둔 내용인데.....

그때 당시에는 꼼꼼히 잘 정리한단고 한내용인데 지금은 어떤지 모르겟습니다.
그때 정리할때 잘 모르는것은 잘 모른다고 해논 그대로 입니다.

다시 다 일일이 보긴 귀찬고 수정하기도 귀찬고.....
그대로 복사해서 올립니다.
좀 많이 깁니다.

1. jQuery( html ) Returns: jQuery
jQuery( html ), 실행후 jQuery객체를 반환

Create DOM elements on-the-fly from the provided String of raw HTML.
주어진 html을 가지고 빠르게 문서 원소를 생성한다.
그리고 jQuery객체로서 그 것을 반환한다.
이말은 그것을 이어서 jQuery의 다른 함수와 함께 사용가능하다는 뜻이다.

</head>
<body>
</body>
</html>

2. jQuery( elements ) Returns: jQuery
jQuery( 원소 ) jQuery( 원소.원소.원소 ), 실행후 jQuery객체를 반환

Wrap jQuery functionality around a single or multiple DOM Element(s).
하나 또는 다단계의 문서원소로서 사용할수 있다.

</head>
<body>
</body>
</html>

3. jQuery( callback ) Returns: jQuery
jQuery( 콜백함수 ), 실행후 jQuery객체를 반환

A shorthand for $(document).ready().
$()은 $(document).ready() 의 짧은 표현으로 사용가능하다.
$(document).ready() 은 문서가 사용가능한 시점을 자동으로 인식하여 주어진 콜백 함수를 동작시킨다.
콜백함수란 지정된 행위가 끝난다음 자동적으로 실행될 함수를 의미한다.

$(document.body).css( "background", "black" );
});
</script>

</head>
<body>
</body>
</html>

4. each( callback ) Returns: jQuery
each( 콜백함수 ), 실행후 jQuery객체를 반환

Execute a function within the context of every matched element.
매치 되어진 모든 원소에 대해 주어진 콜백 함수를 실행한다. 루프의 의미이다.

   $(document.body).click(function () {
   $("div").each(function (i) {
   if (this.style.color != "blue") {
   this.style.color = "blue";
   } else {
   this.style.color = "";
   }
   });
   });

});
</script>
<style>
div { color:red; text-align:center; cursor:pointer;
font-weight:bolder; width:300px; }
</style>
</head>
<body>
<div>Click here</div>
<div>to iterate through</div>
<div>these divs.</div>
</body>
</html>

5. size( ) Returns: Number
size( ), 실행후 숫자를 반환

The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.

   $(document.body).click(function () {
   $(document.body).append($("<div>"));
   var n = $("div").size();
   $("span").text("There are " + n + " divs." +
"Click to add more.");
   }).click(); // trigger the click to start

});
</script>
<style>
body { cursor:pointer; }
div { width:50px; height:30px; margin:5px; float:left;
background:blue; }
span { color:red; }
</style>
</head>
<body>
<span></span>
<div></div>
</body>
</html>

6. length Returns: Number
length, 실행후 숫자를 반환

The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.

   $(document.body).click(function () {
   $(document.body).append($("<div>"));
   var n = $("div").length;
   $("span").text("There are " + n + " divs." +
"Click to add more.");
   }).trigger('click'); // trigger the click to start

});
</script>
<style>
body { cursor:pointer; }
div { width:50px; height:30px; margin:5px; float:left;
background:green; }
span { color:red; }
</style>
</head>
<body>
<span></span>
<div></div>
</body>
</html>

7. get( ) Returns: Array<Element>
get( ), 실행후 원소 배열 반환

Access all matched DOM elements.
매치되는 모든 문서 원소들을 배열로 반환한다.

   function disp(divs) {
   var a = [];
   for (var i = 0; i < divs.length; i++) {
   a.push(divs[i].innerHTML);
   }
   $("span").text(a.join(" "));
   }

disp( $("div").get().reverse() );

});
</script>
<style>
span { color:red; }
</style>
</head>
<body>
Reversed - <span></span>
<div>One</div>
<div>Two</div>
<div>Three</div>
</body>
</html>

8. get( index ) Returns: Element
get( 인덱스 ), 실행후 매치 되는 원소를 반환

Access a single matched DOM element at a specified index in the matched set.
매치되는 원소들 중 주어진 인덱스에 해당하는 하나의 원소만 반환한다.

   $("*", document.body).click(function (e) {
   e.stopPropagation();
   var domEl = $(this).get(0);
   $("span:first").text("Clicked on - " + domEl.tagName);
   });

});
</script>
<style>
span { color:red; }
div { background:yellow; }
</style>
</head>
<body>
<span> </span>
<p>In this paragraph is an <span>important</span> section</p>
<div><input type="text" /></div>
</body>
</html>

9. index( subject ) Returns: Number
index( 객체 ), 실행후 숫자를 반환

Searches every matched element for the object and returns the index of the element, if found, starting with zero.
매치되어진 원소들에 대해 주어진 객체와 동일한것을 검색하여,
존재하면 그 원소들중에 몇번째에 해당하는가 하는 인덱스 번호를 반환한다.
인덱스는 0부터 시작한다.

   $("div").click(function () {
   // this is the dom element clicked
   var index = $("div").index(this);
   $("span").text("That was div index #" + index);
   });

});
</script>
<style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>

10. jQuery.fn.extend( object ) Returns: jQuery
jQuery.fn.extend( 객체), 실행후 jQuery객체를 반환

Extends the jQuery element set to provide new methods (used to make a typical jQuery plugin).
제이쿼리에 새로운 함수를 확장한다.(플러그인으로 만들어 사용한다.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery.fn.extend({
   check: function() {
   return this.each(function() { this.checked = true; });
   },
   uncheck: function() {
   return this.each(function() { this.checked = false; });
   }
});

$(function(){

$("#button1").click(function(){

$('input').check();
});

$("#button2").click(function(){

$('input').uncheck();
});
});
</script>
<style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
</head>
<body>
<form>
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
<input type="checkbox" name="">
</form>
<input type='button' id='button1' value='전체선택'>
<input type='button' id='button2' value='전체해제'>
</body>
</html>

11. jQuery.extend( object ) Returns: jQuery
jQuery.fn.extend( 객체), 실행후 jQuery객체를 반환

Extends the jQuery object itself.
제이쿼리 자체를 확장
아직은 잘 모르겟음

14. jQuery.noConflict( ) Returns: jQuery
jQuery.noConflict( ), 실행후 jQuery객체를 반환

Run this function to give control of the $ variable back to whichever library first implemented it.
아직은 잘 모르겠음

15. jQuery.noConflict( extreme ) Returns: jQuery
jQuery.noConflict( extreme ), 실행후 jQuery객체를 반환

Revert control of both the $ and jQuery variables to their original owners. Use with discretion.
아직은 잘 모르겠음

<Selectors>=>객체 선책

1. #id Returns: Element
#아이디, 실행후 원소 반환

Matches a single element with the given id attribute.
주어진 아이디에 매치되는 원소하나를 찾아 반환

2. element Returns: Array<Element>
원소명, 실행후 원소 배열 반환

Matches all elements with the given name.
주어진 원소명에 매치되는 모든 원소를 배열로 반환

3. .class Returns: Array<Element>
클래스명, 실행후 원소배열로 반환

Matches all elements with the given class.
주어진 클래스명에 매치되는 모든 원소를 배열로 반환

4. * Returns: Array<Element>
모든것, 실행후 원소 배열로 반환

Matches all elements.
매치되는 모든 원소를 반환한다.

5. selector1, selector2, selectorN Returns: Array<Element>
selector1, selector2, selectorN, 실행후 원소배열로 반환

Matches the combined results of all the specified selectors.
주어진 것들에 대해 매치되는 모든 원소를 배열로 반환
구분자는 ,

6. ancestor descendant Returns: Array<Element>
조상 자손, 실행후 원소 배열로 반환

Matches all descendant elements specified by "descendant" of elements specified by "ancestor".
주어진 조상에 주어진 자손을 가진 모든 자손을 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
   $("form input").css("border", "2px dotted blue");
});
</script>
<style>
body { font-size:14px; }
form { border:2px green solid; padding:2px; margin:0;
background:#efe; }
div { color:red; }
fieldset { margin:1px; padding:3px; }
</style>
</head>
<body>
<form>
   <div>Form is surrounded by the green outline</div>
   <label>Child:</label>
   <input name="name" />
   <fieldset>
   <label>Grandchild:</label>
   <input name="newsletter" />
   </fieldset>
</form>
Sibling to form: <input name="none" />
</body>
</html>

7. parent > child Returns: Array<Element>
조상 > 자손, 실행후 원소 배열 반환

Matches all child elements specified by "child" of elements specified by "parent".
주어진 조상에 포함된 주어진 자손에 매치되는 일단계 자손들만 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
   $("#main > *").css("border", "3px double red");
});
</script>
<style>
body { font-size:14px; }
span#main { display:block; background:yellow; height:110px; }
button { display:block; float:left; margin:2px;
font-size:14px; }
div { width:90px; height:90px; margin:5px; float:left;
   background:#bbf; font-weight:bold; }
div.mini { width:30px; height:30px; background:green; }
</style>
</head>
<body>
<span id="main">
   <div></div>
   <button>Child</button>
   <div class="mini"></div>
   <div>
   <div class="mini"></div>
   <div class="mini"></div>
   </div>
   <div><button>Grand</button></div>
   <div><span>A Span <em>in</em> child</span></div>
   <span>A Span in main</span>
</span>
</body>
</html>

8. prev + next Returns: Array<Element>
앞 뒤, 실행후 원소배열 반환

Matches all next elements specified by "next" that are next to elements specified by "prev".
주어진 앞원소와 뒤원소에 순차적으로 매치 되는 뒤원소들을 모두 배열로 반환

</head>
<body>
<form>
   <label>Name:</label>
   <input name="name" />
   <fieldset>
   <label>Newsletter:</label>
   <input name="newsletter" />
   </fieldset>
</form>
<input name="none" />
</body>
</html>

9. prev ~ siblings Returns: Array<Element>
앞원소~형제 원소, 실행후 원소배열 반환

Matches all sibling elements after the "prev" element that match the filtering "siblings" selector.
주어진 앞원소와 형제인 뒤원소를 찾아 모두 배열로 반환

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
   $("#prev ~ div").css("border", "3px groove blue");
});
</script>
<style>
div,span {
   display:block;
   width:80px;
   height:80px;
   margin:5px;
   background:#bbffaa;
   float:left;
   font-size:14px;
}
div#small {
   width:60px;
   height:25px;
   font-size:12px;
   background:#fab;
}
</style>
</head>
<body>
<div>div (doesn't match since before #prev)</div>
<div id="prev">div#prev</div>
<div>div sibling</div>
<div>div sibling <div id="small">div neice</div></div>
<span>span sibling (not div)</span>
<div>div sibling</div>
</body>
</html>

10. :first Returns: Element
첫번째, 실행후 원소 반환

Matches the first selected element.
매치되는 원소들중 첫번째 것만 반환한다.

11. :last Returns: Element
마지막, 실행후 원소 반환

Matches the last selected element.
매치되는 원소들중 마지막 것만 반환한다.

</head>
<body>
<table>
   <tr><td>First Row</td></tr>
   <tr><td>Middle Row</td></tr>
   <tr><td>Last Row</td></tr>
</table>
</body>
</html>

12. :not(selector) Returns: Array<Element>
아니다, 실행후 원소 배열 반환

Filters out all elements matching the given selector.
주어진 것에 해당하지 않는 모든 것을 반환한다.

$("input:not(:checked) + span").css("background-color", "yellow");
$("input").attr("disabled", "disabled");

});
</script>

</head>
<body>
<div>
   <input type="checkbox" name="a" />
   <span>Mary</span>
</div>
<div>
   <input type="checkbox" name="b" />
   <span>Paul</span>
</div>
<div>
   <input type="checkbox" name="c" checked="checked" />
   <span>Peter</span>
</div>
</body>
</html>

13. :even Returns: Array<Element>
짝수, 실행후 원소 배열 반환

Matches even elements, zero-indexed.
매치된 원소들 중에서 인덱스가 짝수인것 모두 반환한다.

14. :odd Returns: Array<Element>
홀수, 실행후 원소 배열 반환

Matches odd elements, zero-indexed.
매치된 원소들 중에서 인덱스가 홀수인것 모두 반환한다.

15. :eq(index) Returns: Element
eq(인덱스), 실행후 원소 반환

Matches a single element by its index.
매치된 원소들 중에서 주어진 인덱스에 매치되는 원소 한개를 반환한다.

</head>
<body>
<table border="1">
   <tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
   <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
   <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
</body>
</html>

16. :gt(index) Returns: Array<Element>
초과, 실행후 원소 배열 반환

Matches all elements with an index above the given one.
매치된 원소들 중에서 인덱스로 주어진 것보다 큰 인덱스 들을 모두 배열로 반환

17. :lt(index) Returns: Array<Element>
미만, 실행후 원소 배열 반환

Matches all elements with an index below the given one.
매치된 원소들 중에서 인덱스로 주어진 것보다 작은 인덱스 들을 모두 배열로 반환

18. :header Returns: Array<Element>
헤더, 실행후 원소 배열 반환

Matches all elements that are headers, like h1, h2, h3 and so on.
매치되는 원소들 중에서 h1, h2 ... 와 같은 헤더 태그들을 모두 배열로 반환한다.

19. :animated Returns: Array<Element>
움직인다, 실행후 원소 배열 반환

Matches all elements that are currently being animated.
매치된 원소들 중에서 애니메이션이 동작하고 있는 것들을 모두 반환한다.

   $("#run").click(function(){
   $("div:animated").toggleClass("colored");
   });
   function animateIt() {
   $("#mover").slideToggle("slow", animateIt);
   }
   animateIt();

});
</script>
<style>
div { background:yellow; border:1px solid #AAA; width:80px; height:80px; margin:5px; float:left; }
div.colored { background:green; }
</style>
</head>
<body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
</body>
</html>

20. :contains(text) Returns: Array<Element>
포함, 실행후 원소 배열 반환

Matches elements which contain the given text.
매치된 원소들 중에서 주어진 텍스트를 포함하는 것들을 모두 배열로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div:contains('John')").css("text-decoration", "underline");
});
</script>

</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
</body>
</html>

21. :empty Returns: Array<Element>
비엇다. 실행후 원소 배열 반환

Matches all elements that are empty, be it elements or text.
매치된 원소들 중에서 텍스트가 비어있는 것들을 모두 배열로 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
   $("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');
});
</script>
<style>
td { text-align:center; }
</style>
</head>
<body>
<table border="1">
   <tr><td>TD #0</td><td></td></tr>
   <tr><td>TD #2</td><td></td></tr>
   <tr><td></td><td>TD#5</td></tr>
</table>
</body>
</html>

22. :has(selector) Returns: Array<Element>
has(selector), 실행후 원소 배열 반환

Matches elements which contain at least one element that matches the specified selector.
매치된 원소들 중에서 주어진 것을 포함하는 것을 모두 배열로 반환한다.

23. :parent Returns: Array<Element>
부모, 실행후 원소 배열 반환

Matches all elements that are parents - they have child elements, including text.
주어진 것이 부모인 것을 모두 받아온다, 비어있는 것은 포함 안함

24. :hidden Returns: Array<Element>
안보임, 실행후 원소 배열 반환

Matches all elements that are hidden, or input elements of type "hidden".
보이지 않는 모든 것들을 반환한다. none hidden 등, 추가로 input을 지정하면 인풋타입이 히든인것만 받아온다

   // in some browsers :hidden includes head, title, script, etc... so limit to body
   $("span:first").text("Found " + $(":hidden", document.body).length +
" hidden elements total.");
   $("div:hidden").show(3000);
   $("span:last").text("Found " + $("input:hidden").length + " hidden inputs.");

});
</script>
<style>
div { width:70px; height:40px; background:#ee77ff; margin:5px; float:left; }
span { display:block; clear:left; color:red; }
.starthidden { display:none; }
</style>
</head>
<body>
<span></span>
<div></div>
<div style="display:none;">Hider!</div>
<div></div>
<div class="starthidden">Hider!</div>
<div></div>
<form>
   <input type="hidden" />
   <input type="hidden" />
   <input type="hidden" />
</form>
<span>
</span>
</body>
</html>

25. :visible Returns: Array<Element>
보임, 실행후 원소 배열 반환

Matches all elements that are visible.
보이는 것들을 모두 반환한다.

   $("div:visible").click(function () {
   $(this).css("background", "yellow");
   });
   $("button").click(function () {
   $("div:hidden").show("fast");
   });

});
</script>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
</head>
<body>
<button>Show hidden to see they don't change</button>
<div></div>
<div class="starthidden"></div>
<div></div>
<div></div>
<div style="display:none;"></div>
</body>
</html>

26. [attribute] Returns: Array<Element>
속성, 실행후 원소 배열 반환

Matches elements that have the specified attribute.
주어진 속성을 가진 것들을 모두 반환한다.

   $("div[id]").one("click", function(){
   var idString = $(this).text() + " = " + $(this).attr("id");
   $(this).text(idString);
   });

});
</script>

</head>
<body>
<div>no id</div>
<div id="hey">with id</div>
<div id="there">has an id</div>
<div>nope</div>
</body>
</html>

27. [attribute=value] Returns: Array<Element>
속성=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute with a certain value.
주어진 속성과 주어진 값이 일치 하는 모든것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input[name='newsletter']").next().text(" is newsletter");
});
</script>

</head>
<body>
<div>
   <input type="radio" name="newsletter" value="Hot Fuzz" />
   <span>name?</span>
</div>
<div>
   <input type="radio" name="newsletter" value="Cold Fusion" />
   <span>name?</span>
</div>
<div>
   <input type="radio" name="accept" value="Evil Plans" />
   <span>name?</span>
</div>
</body>
</html>

28. [attribute!=value] Returns: Array<Element>
속성!=값, 실행후 원소 배열 반환

Matches elements that don't have the specified attribute with a certain value.
주어진 속성과 주어진 값이 일치 하지 않는 모든것들을 반환한다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("input[name!='newsletter']").next().text(" is not newsletter");
});
</script>

29. [attribute^=value] Returns: Array<Element>
속성^=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it starts with a certain value.
주어진 속성을 가지며 값이 주어진 값으로 시작되는 모든 것을 반환한다.

</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
</body>
</html>

30. [attribute$=value] Returns: Array<Element>
속성$=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it ends with a certain value.
주어진 속성을 가지며 값이 주어진 값으로 끝나는 모든 것을 반환한다.

</head>
<body>
<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />
</body>
</html>

31. [attribute*=value] Returns: Array<Element>
속성*=값, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it contains a certain value.
주어진 속성을 가지며 값이 주어진 값을 포함하는 모든 것을 반환한다.

</head>
<body>
<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />
</body>
</html>

32. [selector1][selector2][selectorN] Returns: Array<Element>
속성들, 실행후 원소 배열 반환

Matches elements that have the specified attribute and it contains a certain value.
속성을 여러개 지정할수도 있다. 매치되는 모든 것을 반환한다.

</head>
<body>
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
</body>
</html>

33. :nth-child(index/even/odd/equation) Returns: Array<Element>
몇번째 자식, 실행후 원소 배열 반환

Matches the nth-child of its parent or all its even or odd children.
인덱스나 키워드로 자식을 지정하여 매치되는 것은 모두 반환한다.

34. :first-child Returns: Array<Element>
첫번째 자식, 실행후 원소 배열 반환

Matches the first child of its parent.
첫번째 자식에 매치되는 모든 것을 반환한다.

   $("div span:first-child")
   .css("text-decoration", "underline")
   .hover(function () {
   $(this).addClass("sogreen");
   }, function () {
   $(this).removeClass("sogreen");
   });

});
</script>
<style>
span { color:#008; }
span.sogreen { color:green; font-weight: bolder; }
</style>
</head>
<body>
<div>
   <span>John,</span>
   <span>Karl,</span>
   <span>Brandon</span>
</div>
<div>
   <span>Glen,</span>
   <span>Tane,</span>
   <span>Ralph</span>
</div>
</body>
</html>

35. :last-child Returns: Array<Element>
마지막 자식, 실행후 원소 배열 반환

Matches the last child of its parent.
마지막 자식에 매치되는 모든 것을 반환한다.

   $("div span:last-child")
   .css({color:"red", fontSize:"80%"})
   .hover(function () {
   $(this).addClass("solast");
   }, function () {
   $(this).removeClass("solast");
   });

});
</script>
<style>
span.solast { text-decoration:line-through; }
</style>
</head>
<body>
<div>
   <span>John,</span>
   <span>Karl,</span>
   <span>Brandon,</span>
   <span>Sam</span>
</div>
<div>
   <span>Glen,</span>
   <span>Tane,</span>
   <span>Ralph,</span>
   <span>David</span>
</div>
</body>
</html>