Question

我有以下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更改postprofile div的背景颜色，以便所有/ u1 hrefs都有红色背景，所有/ u3都有蓝色背景等...

据我所知，顶部的JQ代码是最容易做到的，但是目前它选择的所有元素都有一个以post开头或者一个href为/ u1或一个href为/ u3的类，所以当我运行时所有postprofile div都有红色背景。如何让它选择所有以post开头的类和一个href的/ u1或以post开头的类和一个href的/ u3

在加载HTML主体时调用JQ函数。

Answer 1

您的问题与您的代码有所不同，因此我将回答以下问题：

如何选择所有以post开头的类和一个href的/ u1或以post开头的类和一个href的/ u3

使用选择器上的上下文（第二个参数）来提供上下文。在您的选择器中，传入逗号分隔的目标项列表。

$("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");

另一种方法是直接使用div，并从内部执行背景颜色逻辑：

$("div[class^='post']").css("background", function(){
    if ( $("a[href='/u1']", this).length ) { 
        return "blue";
    } else if ( $("a[href='/u3']", this).length ) { 
        return "red";
    }
});

Answer 2

对于具有多个类的元素，您不需要启动选择器。 $("[class^=post]")应为$(".post")。此外，您的选择器中的,也会选择这两个元素（a和div）。这就是选择更多元素而不是预期的原因。

使用parents选择器：

$("a[href='/u1']").parents("div.postprofile").css("background-color","blue");
$("a[href='/u3']").parents("div.postprofile").css("background-color","red");

根据子实体中找到的多个条件，使用jQuery选择div

2 个答案: