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

Question

我在小提琴中有这样一个例子:手风琴是用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')是错误的或什么的。

Answer 1

试一试

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

Answer 2

First:

您必须将id更改为类。

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

第二版：

如果您想得到您的输入的兄弟姐妹，您必须这样做：

在容器中获取选中的输入，当发现它时，获取它的同级文章，然后设置css。

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

Answer 3

您想要使用下一个兄弟姐妹选择器。~选择与该选择器匹配的下一个兄弟姐妹，而不是与该选择器匹配的子兄弟：

$('.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')