Question

我继承了以下代码段：

<div id="topbox">
    <h3>
        <div class="compare_link">Compare Products</div> 
    <input type="checkbox" id="compare_123" name="chkcompare[]" value="123" />
    </h3>
</div>

我想弄清楚的是：

我想找到所有将compare_link和HTML复选框作为子项的h3选择器，并将复选框向下移动10个像素。

我知道我可以找到jQuery的复选框，但如果兄弟是compare_link，我可以这样做吗？

我无法访问某些代码，这就是我无法自行移动复选框的原因。

Answer 1

你不一定需要jQuery。你可以用CSS做到这一点。但是，浏览器支持可能会有所不同。

h3 > div.compare_link + input[type="checkbox"] {
  margin-top: 10px;
}

如果你想使用jQuery，它需要CSS选择器。所以以下内容应该有效：

$('h3 > div.compare_link + input[type="checkbox"]')

Answer 2

你只是要求选择器吗？

$('h3 > .compare_link + :checkbox')

Answer 3

为了最灵活的使用：

$('h3 div.compare_link').siblings('input:checkbox')

这将选择所有复选框，这些复选框是具有compare_link类的div的兄弟。 div类compare_link必须是h3标记的后代。

这样做的好处是，即使复选框移动到div的前面，或者另一个div置于其间，或者如果compare_link div包含在另一个div等中...

jQuery复选框问题

3 个答案: