ホームページ  >  記事  >  ウェブフロントエンド  >  js jquery は、現在の要素の前の次の要素の兄弟レベルを取得します element_jquery

js jquery は、現在の要素の前の次の要素の兄弟レベルを取得します element_jquery

WBOY
WBOYオリジナル
2016-05-16 15:41:191362ブラウズ

var chils= s.childNodes; // s
のすべての子ノードを取得します。

var par=s.parentNode; // s
の親ノードを取得します。

var ns=s.nextSbiling; // s の次の兄弟ノードを取得します

var ps=s.previousSbiling; // s の前の兄弟ノードを取得します

var fc=s.firstChild; // s
の最初の子ノードを取得します。

var lc=s.lastChile; // s の最後の子ノードを取得します

JS はノードの親、子要素を取得します

まず、JQUERY メソッドよりもはるかに面倒な JS 取得メソッドについて説明します。JQUERY メソッドは後で比較するために使用します。

JS メソッドは JQUERY よりもはるかに面倒です。主な理由は、FF ブラウザが改行を DOM 要素として扱うからです。

<div id="test">
<div></div>
<div></div>
</div>

ネイティブ JS は、ID テストを持つ要素の下にある子要素を取得します。

使用可能:

var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 

これは問題ありません

現時点では a.length=2;

しかし、別の方法を使用すると

var b =document.getElementByIdx_x("test").childNodes; 

現時点では、IE ブラウザでは b.length は問題なく、2 のままですが、FF ブラウザでは改行も要素として扱うため、4 になります。

ここでは、これらの要素を走査し、スペースとテキストであるすべての要素を削除する必要があります。

function del_ff(elem){
var elem_child = elem.childNodes;
for(var i=0; i<elem_child.length;i++){
if(elem_child[i].nodeName == "#text" && !/\s/.test(elem_child.nodeValue))
{elem.removeChild(elem_child)
}
}
}

上記の関数は、要素内にテキスト型のノードがあり、テキスト型ノードのノード値が空の場合に子要素を走査します。彼を削除してください。

nodeNames はノードのノード タイプを取得できます。/s/ は JS の空でない文字の正規表現です。前に追加してください! 、空の文字

を意味します。

test() メソッドは、文字列が特定のパターンに一致するかどうかを確認するために使用されます。構文は次のとおりです: RegExpObject.test(string)

文字列 string に RegExpObject に一致するテキストが含まれている場合は true を返し、それ以外の場合は false を返します。

nodeValue は、このノードの値を取得することを意味します。

removeChild は、要素の子要素を削除します。

その後、son、father、brother のプロパティを呼び出す前に、上記の関数を呼び出してスペースをクリアします

<div id="test">
<div></div>
<div></div>
</div>

<script>
function dom() {
var s= document.getElementByIdx_x("test");
del_ff(s);  //清理空格
var chils= s.childNodes; //得到s的全部子节点
var par=s.parentNode;  //得到s的父节点
var ns=s.nextSbiling;  //获得s的下一个兄弟节点
var ps=s.previousSbiling; //得到s的上一个兄弟节点
var fc=s.firstChild;  //获得s的第一个子节点
var lc=s.lastChile;  //获得s的最后一个子节点
}
</script>

以下では、JQUERY の親ノード、子ノード、兄弟ノードを検索する方法を紹介します

jQuery.parent(expr) 親ノードを見つけるには、$("span").parent() や $("span").parent(".class") などのフィルタリング用の expr を渡すことができます。

jQuery.parents(expr)。jQuery.parents(expr) に似ていますが、親要素に限定されず、すべての祖先要素を検索します。

jQuery.children(expr)。すべての子ノードを返します。このメソッドは直接の子ノードのみを返し、すべての子孫ノードを返しません。

jQuery.contents() は、ノードとテキストを含む以下のすべてのコンテンツを返します。このメソッドとchildren()の違いは、空白のテキストを含めることも
として扱われることです。

jQuery オブジェクトが返され、children() はノードのみを返します

jQuery.prev()、すべての兄弟ノードではなく、前の兄弟ノードを返します

jQuery.prevAll()、以前のすべての兄弟ノードを返します

jQuery.next()、すべての兄弟ノードではなく、次の兄弟ノードを返します

jQuery.nextAll()、後続のすべての兄弟ノードを返します

jQuery.siblings()、前後関係なく兄弟ノードを返します

jQuery.find(expr) は jQuery.filter(expr) とはまったく異なります。 jQuery.filter() は jQuery オブジェクトの初期コレクションの一部をフィルターで除外しますが、jQuery.find()
たとえば、$("p")、find("span") は e388a4556c0f65e1904146cc1a846bee 要素から始まり、$( と同等) が返されます。 "p スパン" )

上記の紹介は、現在の要素の兄弟レベルを取得する js jquery に関するもので、皆さんのお役に立てば幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。