如何使用 jquery 查找类并应用样式？答案

【问题标题】：how to find a class and apply a style with jquery?如何使用 jquery 查找类并应用样式？
【发布时间】：2012-04-12 04:41:19
【问题描述】：

我在jsfiddle 有这个例子，手风琴只用 css3 制作，没有 js。

HTML：

<div class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="radio" checked />
        <label for="ac-1">About us</label>
        <article class="ac-small">
            <p id="test_small">test</p> <-- this tag will come from php
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="radio" />
        <label for="ac-2">How we work</label>
        <article class="ac-medium">
            <p id="test_medium">test</p>
        </article>
    </div>
</div>

css：

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
   /* height: 240px;*/
}

我遇到的问题是高度已经设置好了，我用 php 添加内容，我不确定会有多少内容，所以我需要一个动态高度。

php 将加载 p 标签，因此我可以像这样找到高度：

var v = $("#test_small").height();

// add the height to the .ac-small
$('.ac-container input:checked article.ac-small').css("height", v+'px');

我遇到的问题是 css 不适用于选择器，我认为选择器 $('.ac-container input:checked article.ac-small') 是错误的。

【问题讨论】：

标签： jquery css height jquery-ui-accordion

【解决方案1】：

试试

$('.ac-container input:checked').parent('div').children('article.ac-small').css("height", v+'px');

【讨论】：

你可以用一个选择器编写它。
我看到了 jeff b 的帖子。我确实喜欢单一选择器方法。我想我会给出另一种方法。
只需要为input #ac-1等添加点击事件

【解决方案2】：

您的选择器错误。请允许我向您解释该选择器获取的内容：

$('.ac-container input:checked article.ac-small')

它将选择存在于元素 ac-container 元素内的已检查输入内的 <article> 类 ac-small 元素。

那么你不能在输入的inside元素...

在css 中你写了正确的选择器：

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}

【讨论】：

【解决方案3】：

第一：
您必须将 id 更改为类

var v = $(".ac-small").height();

第二：
如果您想获得输入的同级，则必须这样做：
获取容器内选中的输入，找到后获取文章兄弟，然后设置css。

$('.ac-container').find('input:checked').siblings('article').css("height", v+'px');

【讨论】：

【解决方案4】：

您想使用next sibling selector。 ~ 选择与该选择器匹配的下一个兄弟，而不是具有该选择器的孩子：

$('.ac-container input:checked ~ article.ac-small')

你也可以这样写：

$('.ac-container').find('input:checked').siblings('article.ac-small')

或更准确地说（对于下一个兄弟）：

$('.ac-container').find('input:checked').nextAll('article.ac-small')

【讨论】：

【解决方案5】：

你这样做

var v = $("#ac-small").height();

但是您没有任何 id 为“ac-small”的元素。

【讨论】：