Jqueryで特定のa要素を持つ親要素の取得について

質問

Jqueryで特定のa要素を持つ親要素の取得について

<div id="shop">
<p><a href="http://www.aaaa.jp">お店の名前</a></p>
<p>あああああああああ</p>
</div>

<div id="shop">
<p><a href="http://www.bbbb.jp">お店の名前</a></p>
<p>あああああああああ</p>
</div>

ここから、『http://www.bbbb.jp』のリンクを持つdivを指定するとして・・・

$('a[href*="http://www.bbbb.jp"]').parent().parent().css("background-color","#ccc");
こんな風に書きました。

これでもOKなんですけど、『.parent().parent()』親の親って・・・(汗)

もう少しよい親子関係の指定があれば、ぜひ教えていただきたいです！

回答No.3

mtaka2

セレクタの直接指定ではなくなりますが、

$("div").each(function(index,elem){
if ($('a[href*="http://www.bbbb.jp"]', $(elem)).length > 0) {
$(elem).css("background-color","#ccc");
}
});

といった書き方もあります。

> $("div").each(function(index,elem){
$("div") にマッチする全ての要素について個々にチェック

> if ($('a[href*="http://www.bbbb.jp"]', $(elem)).length > 0) {
その要素の下に「<a href="http://www.bbbb.jp">要素がある」場合(a[href*=…]を満たす要素数が0以上の場合)に、

> $(elem).css("background-color","#ccc");
cssの書き換えを実行

という流れになります。

回答No.2

fujillin

文書構造にもよるので、なんとも言えませんが…

parents("div")　とか　parents("div[id^=shop]")　とかで特定できるのかも。

回答No.1

think49

セレクタで簡単にやりたいとお考えなら、無理だと思います。
以前同じようなことをCSSセレクタでやれないかと探したことがありますが、CSS3でも子要素を先読みするような機能は実装されていませんでした。
XPathなら出来たと思います。

Selectors - jQuery 日本語リファレンス
http://semooh.jp/jquery/api/selectors/
Latest topics > CSS3セレクタとXPathでの表現の対応表 - outsider reflex
http://piro.sakura.ne.jp/latest/blosxom/mozilla/xul/2007-09-13_selector-to-xpath.htm