「parentとparents」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

parentとparents

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>parentとparents</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// aタグにクリックイベント時にviewLine()を実行と追加（バインディング）
$('a').bind('click', viewLine);
});
var viewLine = function(e)
{
// クリックされたaタグの直ぐ上の親のtd
pTd = $(this).parent("td");
pTdAry = {
pTdHTML : $(this).parent("td").html(),
pTdlength : $(this).parent("td").length,
pTd_HTML : pTd.html(),
pTd_length : pTd.length,
pTd0_innerHTML : pTd[0].innerHTML,
pTd0_textContent : pTd[0].textContent,
pTd0_outerHTML : pTd[0].outerHTML,
};
// クリックされたaタグの親（parentじゃなくて、parents）のtd
psTd = $(this).parents("td");
psTdAry = {
psTdHTML : $(this).parents("td").html(),
psTdlength : $(this).parents("td").length,
psTd_HTML : psTd.html(),
psTd_length : psTd.length,
psTd0_innerHTML : psTd[0].innerHTML,
psTd0_textContent : psTd[0].textContent,
psTd0_outerHTML : psTd[0].outerHTML,
};
// クリックされたaタグの直ぐ上の親のtr
pTrAry = {
pTrHTML : $(this).parent("tr").html(),
pTrlength : $(this).parent("tr").length,
};
// クリックされたaタグの親（parentじゃなくて、parents）のtr
psTr = $(this).parents("tr");
psTrAry = {
psTrHTML : $(this).parents("tr").html(),
psTrlength : $(this).parents("tr").length,
psTr_HTML : psTr.html(),
psTr_length : psTr.length,
psTr0_innerHTML : psTr[0].innerHTML,
psTr0_textContent : psTr[0].textContent,
psTr0_outerHTML : psTr[0].outerHTML,
};
// 以下、出力用 ========================================
output = "";
output += '/* ============== ▼出力結果' + "\n";
output += "\n// ================================ \n";
output += '// クリックされたaタグの直ぐ上の親のtd' + "\n";
output += 'pTd = $(this).parent("td");' + "\n";
output += 'pTdAry = {' + "\n";
output += ' pTdHTML : $(this).parent("td").html(),' + "\n";
output += ' pTdlength : $(this).parent("td").length,' + "\n";
output += ' pTd_HTML : pTd.html(),' + "\n";
output += ' pTd_length : pTd.length,' + "\n";
output += ' pTd0_innerHTML : pTd[0].innerHTML,' + "\n";
output += ' pTd0_textContent : pTd[0].textContent,' + "\n";
output += ' pTd0_outerHTML : pTd[0].outerHTML,' + "\n";
output += '};' + "\n";
for (var k_pTd in pTdAry)
{
output += k_pTd + ': ' + pTdAry[k_pTd] + "\n";
}
output += "\n// ================================ \n";
output += '// クリックされたaタグの親（parentじゃなくて、parents）のtd' + "\n";
output += '// 直ぐ上の親がtdなのでソレをとってくれる' + "\n";
output += 'psTd = $(this).parents("td");' + "\n";
output += 'psTdAry = {' + "\n";
output += ' psTdHTML : $(this).parents("td").html(),' + "\n";
output += ' psTdlength : $(this).parents("td").length,' + "\n";
output += ' psTd_HTML : psTd.html(),' + "\n";
output += ' psTd_length : psTd.length,' + "\n";
output += ' psTd0_innerHTML : psTd[0].innerHTML,' + "\n";
output += ' psTd0_textContent : psTd[0].textContent,' + "\n";
output += ' psTd0_outerHTML : psTd[0].outerHTML,' + "\n";
output += '};' + "\n";
for (var k_psTd in psTdAry)
{
output += k_psTd + ': ' + psTdAry[k_psTd] + "\n";
}
output += "\n// ================================ \n";
output += '// クリックされたaタグの直ぐ上の親のtr' + "\n";
output += '// 直ぐ上の親はtdだから「$(this).parent("tr")」は使えない' + "\n";
output += 'pTrAry = {' + "\n";
output += ' pTrHTML : $(this).parent("tr").html(),' + "\n";
output += ' pTrlength : $(this).parent("tr").length,' + "\n";
output += '};' + "\n";
for (var k_pTr in pTrAry)
{
output += k_pTr + ': ' + pTrAry[k_pTr] + "\n";
}
output += "\n// ================================ \n";
output += '// クリックされたaタグの親（parentじゃなくて、parents）のtr' + "\n";
output += 'psTr = $(this).parents("tr");' + "\n";
output += 'psTrAry = {' + "\n";
output += ' psTrHTML : $(this).parents("tr").html(),' + "\n";
output += ' psTrlength : $(this).parents("tr").length,' + "\n";
output += ' psTr_HTML : psTr.html(),' + "\n";
output += ' psTr_length : psTr.length,' + "\n";
output += ' psTr0_innerHTML : psTr[0].innerHTML,' + "\n";
output += ' psTr0_textContent : psTr[0].textContent,' + "\n";
output += ' psTr0_outerHTML : psTr[0].outerHTML,' + "\n";
output += '};' + "\n";
for (var k_psTr in psTrAry)
{
output += k_psTr + ': ' + psTrAry[k_psTr] + "\n";
}
output += '▲出力結果 ============== */' + "\n";
$("#output").text(output);
// ここまで、出力用 ========================================
return false;
};
</script>
</head>
<body>
<h1>parentとparents</h1>
<table>
<tr><td>eetd1</td><td>eetd2</td><td><a href="#">ee</a></td></tr>
<tr><td>fftd1</td><td>fftd2</td><td><a href="#">ff</a></td></tr>
<tr><td>ggtd1</td><td>ggtd2</td><td><a href="#">gg</a></td></tr>
</table>
<table>
<tr><td><input type="text" value="hhtd1"></td><td><input type="text" value="hhtd2"></td><td>hh3</td><td><a href="#">hh</a></td></tr>
<tr><td><input type="text" value="iitd1"></td><td><input type="text" value="iitd2"></td><td>ii3</td><td><a href="#">ii</a></td></tr>
<tr><td><input type="text" value="jjtd1"></td><td><input type="text" value="jjtd2"></td><td>jj3</td><td><a href="#">jj</a></td></tr>
</table>
<textarea style="width:95%;height:15em;" id="output"></textarea>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>