Problem with jquery selector

Question

i have a function that i can call to apply a rounded corner fix to 'button.button, button.ui-button, input.button and input.ui-button' which merely adds a div next to the element and then wraps the whole lot in another div.

It works fine on page load, however, i had to make a function that i could call to fix buttons not available at page load.

$(document).ready(function(){
    // Adds necessary div elements to buttons on page load.
    $('input.button:visible, button.button:visible, input.ui-button:visible, button.ui-button:visible').after('<div class="button-right"></div>').wrap('<div class="button-wrapper" />');
    $('input.button-large:visible, button.button-large:visible').after('<div class="button-large-right"></div>').wrap('<div class="button-large-wrapper" />');
});
function CheckIEButtons(){
    // Function to add necessary div elements to buttons - useful for buttons not accessible on page load
    $("input.button:visible:not(div.button-wrapper),button.button:visible:not(div.button-wrapper)").after('<div class="button-right"></div>').wrap('<div class="button-wrapper" />');
    $("input.ui-button:visible:not(div.button-wrapper),button.ui-button:visible:not(div.button-wrapper)").after('<div class="button-right"></div>').wrap('<div class="button-wrapper" />');
    $("input.button-large:visible:not(div.button-large-wrapper),button-large.button:visible:not(div.button-large-wrapper)").after('<div class="button-large-right"></div>').wrap('<div class="button-large-wrapper" />');
}

So i basically want to select all buttons/inputs with appropriate class that ARE visible but are NOT already in the wrapper div.

Whenever i call the function at the moment, its adding the divs regardless if its already in one.

Answer 1

Because .button-wrapper is the parent you'd need to specify that the element being selected doesn't have a .button-wrapper parent.

// parent isn't button-wrapper-----------v --------------------------------------------------------v
$("input.button:visible:not(div.button-wrapper > input.button),button.button:visible:not(div.button-wrapper > button.button)")

same concept for the others.

If the selector's getting too long, you could put the not test in a .not() method:

$("input.button:visible,button.button:visible").not(function() {
    return $(this.parentNode).hasClass( "button-wrapper" );
})...