jQuery – 検索 – 完全一致・前方一致・後方一致・部分一致

こんにちは！

今回は、jQueryで多用すると思われる以下の検索についてまとめていきたいと思います。

• 完全一致
• 前方一致
• 後方一致
• 部分一致

例

以下は、name属性に「abcde」を1文字ずつ右にずらして命名した5つのdiv要素になります。

1. <div name=”abcde”>abcde</div>
2. <div name=”eabcd”>eabcd</div>
3. <div name=”deabc”>deabc</div>
4. <div name=”cdeab”>cdeab</div>
5. <div name=”bcdea”>bcdea</div>

これらの要素を各検索方法で、以下のように取得できます。

完全一致

nameが「abcde」の要素を取得します。

1. $(“div[name=abcde]”)

取得結果：

<div name=”abcde”>abcde</div>

前方一致

nameが「ab」で始まる要素を取得します。

1. $(“div[name^=ab]”)

取得結果：

<div name=”abcde”>abcde<span></span></div>

後方一致

nameが「ab」で終わる要素を取得します。

1. $(“div[name$=ab]”)

取得結果：

<div name=”cdeab”>cdeab<span></span></div>

部分一致

nameに「ab」が含まれる要素を取得します。

1. $(“div[name*=ab]”)

取得結果：

<div name=”abcde”>abcde<span></span></div>
<div name=”eabcd”>eabcd<span></span></div>
<div name=”deabc”>deabc<span></span></div>
<div name=”cdeab”>cdeab<span></span></div>