jQuery checkbox question

Question

I have inherited the following code snippet:

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

What I'm trying to figure out is:

I want to find all h3 selectors that have compare_link and HTML checkbox as children and move the checkbox down 10 pixels.

I know I can find checkboxes with jQuery, but can I do this if the sibling is compare_link?

I don't have access to some of the code which is why I can't move the checkbox down myself.

Answer 1

Are you just asking for the selector?

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

Answer 2

You don't need jQuery for this necessarily. You can do this with CSS. However, browser support may vary.

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

If you want to use jQuery it takes CSS selectors. So the following should work:

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

Answer 3

For the most flexibility use:

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

This selects all checkboxes that are siblings of divs with the compare_link class. The div with the compare_link class must be descendants of an h3 tag.

The advantage is that this works even the checkbox is move infront of the div or another div is placed in between or if the compare_link div is wrapped in another div etc...