<div class="htmlarea"> <textarea id="runcode14500"> <title>jQueryとJavaScriptの比較学習(親要素と子の前後要素の取得)</title> <style type="text/css"> .c1{background-color:green;padding:20px;} .c2{background-color:red;padding:20px;} .c1 div{background-color:gray;} </style> <div class="c1" onclick="fChild(this);"> <div id="first" onclick="fNext(this);"> </div> <div id="second" onclick="fPrev(this);">まず</div> <div id="third" onclick="fParent(this);">2 番目</div> </div>親 </textarea> <br> <input onclick="runEx('runcode14500')" type="button" value="运行代码"><input onclick="doCopy('runcode14500')" type="button" value="复制代码"><input onclick="doSave(runcode14500)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A すべて選択 注: </div>外部 Js を導入する必要がある場合は、<script type="text/javascript" src="style/jquery-1.3.2.min.js"></script> を実行するために更新する必要があります]<script type="text/javascript"> function fNext(obj){//许多时候需要元素之间没有间隙才能取到 //alert(obj.nextSibling.id); alert(jQuery(obj).next().attr("id"));//传递this,通过$(obj)转化为jQuery对象 } function fPrev(obj){ //alert(obj.previousSibling.id); alert(jQuery(obj).prev().attr("id")); } function fParent(obj){ //alert(obj.parentNode.className); //alert(jQuery(obj).parent().attr("class")); jQuery(obj).parent().removeClass("c1").addClass("c2") alert(jQuery(obj).parent().attr("className"));//取得className,当成属性来取 } function fChild(obj){ //var childs = obj.childNodes; var childs = jQuery(obj).children(); for(i=0;i<childs.length;i++){ alert(childs[i].id); } //jQuery的each遍历 } </script>