CODEWITHSUNDEEP
jquery
coson
coson

Reputation: 8659

jQuery checkbox 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.

Upvotes: 3

Views: 181

Answers (3)

Peter Ajtai
Peter Ajtai

Reputation: 57705

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...

Upvotes: 0

Jason McCreary
Jason McCreary

Reputation: 73031

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

Upvotes: 4

Thomas
Thomas

Reputation: 2162

Are you just asking for the selector?

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

Upvotes: 2

Related Questions