Flamingo.Selector.get()¶
get() メソッドはCSSセレクターでノードを取得するために使用されます。
構文¶
Flamingo.Selector.get(selector, parent)
パラメータ¶
| パラメータ名 | 型 | 説明 |
|---|---|---|
| selector | String | CSSセレクター |
| parent | Node object | 指定CSSセレクターが実行されるコンテクストノード。 |
戻り値¶
| 型 | 説明 |
|---|---|
| Array | CSSセレクターにより見つかったHTMLElementオブジェクトの配列。 |
例 1¶
以下の例はLI要素の値全てを表示する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード：
<html>
<body>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</body>
</html>
ページ上のLI要素の全ての値を表示するにはテンプレートに次のコード追加が必要です：
<!--{foreach Flamingo.Selector.get('li') as item }-->
Value is: <!--{= Flamingo.Selector.value('.', item) }--><br/>
<!--{/foreach}-->
サンプルページの結果は以下のようになります：
Value is: List item 1
Value is: List item 2
例 2¶
以下の例はリスト内で使用されているURL全てを表示する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード：
<html>
<body>
<ul>
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
リスト内で使用されているURL全てを表示するにはテンプレートに次のコード追加が必要です：
<!--{foreach Flamingo.Selector.get('li > a') as item }-->
URL is: <!--{= Flamingo.jQ(item).attr('href') }--><br/>
<!--{/foreach}-->
The result will look like:
URL is: http://www.site1.com
URL is: http://www.site2.com
例 3¶
以下の例はリストにCSSクラスを一つ追加する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード：
<html>
<body>
<ul>
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
custom-class と呼ばれるCSSスタイルをリストに適用するにはテンプレートに次のコード追加が必要です：
<!--{
var list = Flamingo.jQ('ul').clone(true);
list.addClass('custom-class');
Flamingo.output(list);
}-->
<!--{= list[0].outerHTML}-->
得られたページのHTMLコードは以下のようになります：
<html>
<body>
<ul class="custom-class">
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
例 4¶
以下の例はリストの各リンクに target=”_blank” 属性を追加する方法を示しています。
デスクトップサイト用オリジナルページにあるソースHTMLコード：
<html>
<body>
<ul>
<li><a href="http://www.site1.com">List item 1</a></li>
<li><a href="http://www.site2.com">List item 2</a></li>
</ul>
</body>
</html>
リストの各リンクに target=”_blank” を追加するには、テンプレートに次のコード追加が必要です。
<--{
var links = Flamingo.jQ('a').clone(true);
links.attr('target', '_blank');
Flamingo.output(links);
}-->
得られたページのHTMLコードは以下のようになります：
<html>
<body>
<ul>
<li><a href="http://www.site1.com" target="_blank">List item 1</a></li>
<li><a href="http://www.site2.com" target="_blank">List item 2</a></li>
</ul>
</body>
</html>