2

私は次のJQコードを持っています：

$("[class^=post],[href='/u1']").prev("div").css("background-color","blue");
$("[class^=post],[href='/u3']").prev("div").css("background-color","red");

サンプルHTML：

<div id="container" style="width:500px">
<div id="p1" class="post row1">
    <div class="postprofile" id="profile44" style="height:200px;width:100px;float:left;">
    <dl>
        <dt>
            <a href="/u1"><img src="/logo_1.png" alt=""></a>
            <strong style="font-size:1.2em">
<br />
                <a href="/u1">RD</a>
            </strong>
        </dt>
        <dd>...</dd>
        <dd>...</dd>
    </dl>
    </div>

    <div class="postbody" style="height:200px;width:400px;float:left;">
        <div class="content-clearfix">
            <div>This is a test</div>
        </div>
    </div>  
</div>
</div>

<br />


<div id="container2" style="width:500px">
<div id="p2" class="post row3">
    <div class="postprofile" id="profile45" style="height:200px;width:100px;float:left;">
    <dl>
        <dt>
            <a href="/u3"><img src="/logo_2.png" alt=""></a>
            <strong style="font-size:1.2em">
<br />
                <a href="/u3">Evilyynn</a>
            </strong>
        </dt>
        <dd>...</dd>
        <dd>...</dd>
    </dl>
    </div>
    <div class="postbody" style="height:200px;width:400px;float:left;">
        <div class="content-clearfix">
            <div>This is also a test</div>
        </div>
    </div>

</div>
</div>

タグ内のhrefに基づいてpostprofiledivの背景色を変更して、すべての/ u1 hrefの背景が赤になり、すべての/u3の背景が青になるようにします...

私の知る限りでは、上部のJQコードが最も簡単ですが、現在、post、hrefが/u1、またはhrefが/ u3で始まるクラスを持つすべての要素を選択するため、すべてを実行するとpostprofiledivの背景は赤です。post AND a href of / u1で始まるすべてのクラス、またはpost AND a href of/u3で始まるクラスを選択するにはどうすればよいですか。

JQ関数は、HTML本体がロードされるときに呼び出されます。

4

2 に答える 2

2

あなたの質問はあなたのコードから逸脱しているので、私は次のように答えます：

post で始まるすべてのクラスと /u1 の href または post で始まるクラスと /u3 の href を選択するにはどうすればよいですか

コンテキストを提供するには、セレクターでコンテキスト (2 番目の引数) を使用します。セレクターで、ターゲット項目のコンマ区切りリストを渡します。

$("a[href='/u1'], a[href='/u3']", "div[class^='post']").closest("div");

フィドル: http://jsfiddle.net/jonathansampson/FrYF7/

または、最初のコードに従ってください。

$("a[href='/u1']").closest("div[class^='post']").css("background", "blue");
$("a[href='/u3']").closest("div[class^='post']").css("background", "red");​

もう 1 つの方法は、div に直接進み、内部から背景色のロジックを実行することです。

$("div[class^='post']").css("background", function(){
    if ( $("a[href='/u1']", this).length ) { 
        return "blue";
    } else if ( $("a[href='/u3']", this).length ) { 
        return "red";
    }
});​​​
于 2012-06-06T13:55:40.773 に答える
0

複数のクラスを持つ要素には、starts-with セレクターは必要ありません。$("[class^=post]")である必要があります$(".post")。また、,セレクターの は両方の要素 ( a、およびdiv) を選択します。これが、意図したよりも多くの要素を選択している理由です。

親セレクターを使用します。

$("a[href='/u1']").parents("div.postprofile").css("background-color","blue");
$("a[href='/u3']").parents("div.postprofile").css("background-color","red");
于 2012-06-06T13:58:57.557 に答える