▼li要素に順次クラスを追加します。
Apache公式サイトから、最新バージョンの「Windows用MSIパッケージ」をダウンロードします。
Apacheの最新バージョンは「Apache 2.2.4」（2007/01現在）です。 「Download」をクリックすると、ダウンロード案内ページが表示されます。
ダウンロード案内ページで、Win32 Binary (MSI Installer)の隣にある「apache_バージョン番号-win32-x86-no_ssl.msi」をクリックすると、ダウンロードが開始します。 ダウンロードが完了すると、デスクトップに「パッケージアイコンパッケージアイコン」が表示されます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>DOM要素の属性(Attirbutes)：クラス（Class）：addClass(class)の使用例 | jQuery</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
/* 例1 */
$("#steps li").each(function(i){
++i;
$(this).addClass("step"+i);
});
/* 例2 */
$("#commentlist li").each(function (i) {
++i;
$(this).prepend('<span class="commentnumber"> #'+i+'</span>');
});
});
</script>
<style type="text/css">
/* 例1 */
#steps {
margin:2em 0; padding:0;
list-style:none;
}
#steps li {
margin:0; padding:5px 0 10px 80px;
list-style:none;
}
#steps h3 {
font-size:1.2em;
margin:0; padding:0;
}
#steps li {
background:transparent;
background-position:0 0;
background-repeat:no-repeat;
min-height:33px;
height:auto!important;
height:33px;
}
#steps .step1 { background-image:url("/content/img/ajax/step1.png"); }
#steps .step2 { background-image:url("/content/img/ajax/step2.png"); }
#steps .step3 { background-image:url("/content/img/ajax/step3.png"); }
/* 例2 */
#commentlist {
margin:2em 0; padding:0 0 0 2em;
}
#commentlist li {
list-style-type:decimal;
position: relative;
border-bottom:1px solid #ccc;
color:darkorange;
font-weight:bold;
font-size:1.2em;
}
#commentlist h3 {
margin:10px 0 5px 0; padding:0;
}
#commentlist li p {
color:#333;
margin:0 0 10px 0; padding:0;
font-weight:normal;
font-size:.8em;
}
#commentlist .commentnumber {
position: absolute;
top:0; right:0;
}
</style>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<div id="wrap">
<h1>DOM要素の属性(Attirbutes)：クラス（Class）：addClass(class)の使用例 | jQuery</h1>
<h2>参照：<a href='http://www.webdesignerwall.com/tutorials/jquery-sequential-list/'>jQuery Sequential List</a></h2>
<p>▼li要素に順次クラスを追加します。</p>
<!-- CODE -->
<ol id="steps">
<li>
<h3>Apacheサイトにアクセス</h3>
<p>Apache公式サイトから、最新バージョンの「Windows用MSIパッケージ」をダウンロードします。</p>
</li>
<li>
<h3>Apacheのバージョンを選択</h3>
<p>Apacheの最新バージョンは「Apache 2.2.4」（2007/01現在）です。 「Download」をクリックすると、ダウンロード案内ページが表示されます。</p>
</li>
<li>
<h3>選択したバージョンのパッケージをダウンロード</h3>
<p>ダウンロード案内ページで、Win32 Binary (MSI Installer)の隣にある「apache_バージョン番号-win32-x86-no_ssl.msi」をクリックすると、ダウンロードが開始します。 ダウンロードが完了すると、デスクトップに「パッケージアイコンパッケージアイコン」が表示されます。</p>
</li>
</ol>
<ol id="commentlist">
<li>
<h3>Apacheサイトにアクセス</h3>
<p>Apache公式サイトから、最新バージョンの「Windows用MSIパッケージ」をダウンロードします。</p>
</li>
<li>
<h3>Apacheのバージョンを選択</h3>
<p>Apacheの最新バージョンは「Apache 2.2.4」（2007/01現在）です。 「Download」をクリックすると、ダウンロード案内ページが表示されます。</p>
</li>
<li>
<h3>選択したバージョンのパッケージをダウンロード</h3>
<p>ダウンロード案内ページで、Win32 Binary (MSI Installer)の隣にある「apache_バージョン番号-win32-x86-no_ssl.msi」をクリックすると、ダウンロードが開始します。 ダウンロードが完了すると、デスクトップに「パッケージアイコンパッケージアイコン」が表示されます。</p>
</li>
</ol>
<!-- CODE / -->
</div>
</body>
</html>
Apacheサイトにアクセス
Apache公式サイトから、最新バージョンの「Windows用MSIパッケージ」をダウンロードします。
Apacheのバージョンを選択
Apacheの最新バージョンは「Apache 2.2.4」（2007/01現在）です。 「Download」をクリックすると、ダウンロード案内ページが表示されます。
選択したバージョンのパッケージをダウンロード
ダウンロード案内ページで、Win32 Binary (MSI Installer)の隣にある「apache_バージョン番号-win32-x86-no_ssl.msi」をクリックすると、ダウンロードが開始します。 ダウンロードが完了すると、デスクトップに「パッケージアイコンパッケージアイコン」が表示されます。