Ext JSやRapid Driveなど
システム開発の技術情報をご紹介。

E:first-child

HTMLコード

<p>文章 文章 文章</p>
<p>文章 文章 文章</p>

<div>
    <p>文章 文章 文章</p>

    <p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

JSコード

Ext.select( ‘p:first-child‘, true ).each(function(el){

    el.highlight();

});

E:last-child

HTMLコード

<p>文章 文章 文章</p>
<p>文章 文章 文章</p>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

JSコード

Ext.select( ‘p:last-child‘, true ).each(function(el){

    el.highlight();

});

E:nth-child(n)

HTMLコード

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

JSコード

Ext.select( ‘div p:nth-child(3)‘, true ).each(function(el){

    el.highlight();

});

E:nth-child(odd)

HTMLコード

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

JSコード

Ext.select( ‘div p:nth-child(odd)‘, true ).each(function(el){

    el.highlight();

});

E:nth-child(even)

HTMLコード

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

JSコード

Ext.select( ‘div p:nth-child(even)‘, true ).each(function(el){

    el.highlight();

});

E:only-child

HTMLコード

<div>
    <p>文章 文章 文章</p>
</div>

<div>
    <p>文章 文章 文章</p>
    <p>文章 文章 文章</p>
</div>

JSコード

Ext.select( ‘div p:only-child‘, true ).each(function(el){

    el.highlight();

});

E:checked

HTMLコード

<div>
    <input type="checkbox" checked="checked" /><span>チェックボックス</span>
</div>

JSコード

Ext.select( ‘div input:checked + span’, true ).each(function(el){

    el.highlight();

});

E:checked

HTMLコード

<div>
    <input type="checkbox" checked="checked" /><span>チェックボックス</span>
</div>

JSコード

Ext.select( ‘div input:checked + span’, true ).each(function(el){

    el.highlight();

});

E:first

ドキュメントの中で、はじめに登場するエレメントを取得します。

HTMLコード

<p>文章</p>
<div>DIV1</div>
<div>DIV2</div>

JSコード

Ext.select( ‘div:first‘, true ).each(function(el){

    el.highlight();

});

E:last

ドキュメントの中で、最後に登場するエレメントを取得します。

HTMLコード

<div>DIV1</div>
<div>DIV2</div>
<p>文章</p>

JSコード

Ext.select( ‘div:last‘, true ).each(function(el){

    el.highlight();

});

E:nth(n)

ドキュメントの中で、n番目に登場するエレメントを取得します。

HTMLコード

<div>DIV1</div>
<div>DIV1</div>
<p>文章</p>
<div>DIV1</div>
<div>DIV1</div>

JSコード

Ext.select( ‘div:nth(3)‘, true ).each(function(el){

    el.highlight();

});

E:odd

E:nth-child(odd)のショートカットです。

奇数で登場するエレメントを取得します。下記の例では、奇数で登場するエレメントでかつDIVタグのものを選択しています。

HTMLコード

<div>DIV1</div>
<div>DIV2</div>
<p>文章</p>
<div>DIV3</div>
<div>DIV4</div>

JSコード

Ext.select( ‘div:odd‘, true ).each(function(el){

    el.setStyle({
        color: ‘red’
    });

});

E:even

E:nth-child(even)のショートカットです。

偶数で登場するエレメントを取得します。下記の例では、偶数で登場するエレメントでかつDIVタグのものを選択しています。

HTMLコード

<div>DIV1</div>
<div>DIV2</div>
<p>文章</p>
<div>DIV3</div>
<div>DIV4</div>

JSコード

Ext.select( ‘div:even’, true ).each(function(el){

    el.setStyle({
        color: ‘red’
    });

});

E:contains(foo)

innerHTMLのテキストにfooで指定したテキストが含まれるエレメントを取得します。

HTMLコード

<p>Ext JS 実践開発ガイドをご利用いただきありがとうございます。</p>
<p>この文章は、株式会社ゼノフィが提供しています。</p>

JSコード

Ext.select( ‘p:contains(株式会社ゼノフィ)‘, true ).each(function(el){

    el.highlight();

});

E:nodeValue(foo)

HTMLコード

<p>This is a paragraph</p>
<p>文章</p>

JSコード

Ext.select( ‘p:nodeValue(This is a paragraph)‘, true ).each(function(el){

    el.highlight();

});

E:not(S)

HTMLコード

<p class="x-foo">文章 文章 文章</p>
<p class="x-bar">文章 文章 文章</p>
<p class="x-foo">文章 文章 文章</p>

JSコード

Ext.select( ‘p:not(.x-bar)‘, true ).each(function(el){

    el.highlight();

});

E:has(S)

エレメントの子エレメントが指定してたクラスを保持しているエレメントを取得します。次の例では、DIVタグの中にあるタグで、x-barクラスを指定されているタグがある場合、DIVタグが選択されます。

HTMLコード

<div>
    <p class="x-bar">message message …</p>
</div>

JSコード

Ext.select( ‘div:has(.x-bar)‘, true ).each(function(el){

    el.highlight();

});

以下は動作検証がとれませんでしたので、検証後記述します。

E:next(S)

E:prev(S)