jQuery的複選框的問題

我繼承了下面的代碼片段：jQuery的複選框的問題

<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，我可以這麼做嗎？

我無法訪問部分代碼，因此我無法將自己的複選框向下移動。

來源

2010-10-02 coson

你不需要jQuery。你可以用CSS來做到這一點。但是，瀏覽器支持可能有所不同

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

如果你想使用jQuery，它需要CSS選擇器。所以下面應該工作：

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

來源

2010-10-02 20:37:30

你只是要求選擇器？

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

來源

2010-10-02 20:36:15 Thomas

用好直接子選擇器。 – 2010-10-02 20:38:18

是的，因爲一旦元素被選中，那麼我應該可以設置CSS。你對直接孩子選擇者的評論意味着什麼？ – coson 2010-10-02 20:53:14

在大多數情況下使用的靈活性：

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

這將選擇與該compare_link類的div的同級所有複選框。 div與compare_link類必須是h3標記的後代。

的優點是，這個工程即使複選框移動的div盈或另一格放置在中間，或者如果compare_link格被包裹在另一個DIV等..

來源

2010-10-02 22:47:18

jQuery的複選框的問題

回答

相關問題