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

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"]')