반응형
JQuery
attr,nth-child(),addClass,
1.중첩된 리스트의 두번째 레벨에 있는 모든 li요소에 special클래스를 추가한다.
//방법1
$(".clear-after > li > ul > li").attr("class","special");
//방법2
$(".clear-after > li > ul > li").addClass("special");
2. 테이블의 세번째 열에 있는 모든 셀에 year클래스를 추가한다.
$("td:nth-child(3)").attr("class","year");$("tr > td").eq(2).attr("class","year");
이 경우에는 모든 td를 나열해서 2번째 요소만탐색, 하나만 찾기 때문에 자식마다 모두 탐색을 해야하는데 맞지 않는다.
3.Tragedy(비극)라는 단어를 포함하는 첫 번째 테이블 행(row)에 special클래스를 추가한다.
//방법1
var $tds=$("td");
for(var i=0;i<$tds.length;i++){
if($tds.eq(i).text()=="Tragedy"){
$tds.eq(i).parent().attr("class","special");
break;
}
}
//방법2
$("td:contains('Tragedy')").eq(0).parent().attr("class","special");
4. 링크(a)를 포함하는 모든 리스트 항목li 선택한다. 선택된 항목에 뒤따라오는 형제 리스트 항목에 afterlink클래스를 추가한다.
//방법1
$("a").parent("li").next("li").addClass("afterlink");
5.모든 .pdf링크의 가장 가까운 조상 ul에 tragedy클래스를 추가한다.
//방법1
$("a[href$='.pdf']").closest("ul").addClass("tragedy");
//방법2
$("a[href$='.pdf']").parents("ul").eq(0).addClass("tragedy");
CSS
<style type="text/css">
.special{color:red;} .year{background-color: orange;}
.afterlink{background-color:green;}
.tragedy{background-color:pink;}
</style>
HTML
<body>
<div id="container">
<h2>Selected Shakespeare Plays</h2>
<ul id="selected-plays" class="clear-after">
<li>Comedies
<ul>
<li><a href="/asyoulikeit/">As You Like It</a></li>
<li>All's Well That Ends Well</li>
<li>A Midsummer Night's Dream</li>
<li>Twelfth Night</li>
</ul>
</li>
<li>Tragedies
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>
<li>Macbeth</li>
<li>Romeo and Juliet</li>
</ul>
</li>
<li>Histories
<ul>
<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
<li>Richard II</li>
</ul>
</li>
</ul>
<h2>Shakespeare's Plays</h2>
<table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
<td>The Fair Youth</td>
<td>1–126</td>
</tr>
<tr>
<td>The Dark Lady</td>
<td>127–152</td>
</tr>
<tr>
<td>The Rival Poet</td>
<td>78–86</td>
</tr>
</table>
</div>
</body>반응형
'Front-end > JQuery' 카테고리의 다른 글
| (JQuery)AJAX 비동기구현 (0) | 2023.03.08 |
|---|---|
| (JQuery)DOM처리 메서드 (0) | 2023.03.08 |
| (JQuery)이벤트 전파, 기본기능 금지 메서드 (0) | 2023.03.06 |
| (JQuery)DOM탐색 메서드 (0) | 2023.03.06 |
| (JQuery)셀렉터 표현식 (0) | 2023.03.06 |