Question

I would like to select all jquery UI button that live inside all <div>s which belong to the .view class. With that in mind, I’ve written the following pieces of code, none of which do what I want.

What I want is, like I said, to return all elements whose class is .ui-button that live inside an element whose class is .view.

    $(".view").find('.ui-button').each(function(index){
        console.log(index);
    })

    $(".view .ui-button").each(function(index){
        console.log(index);
    })

    $(".view > .ui-button").each(function(index){
        console.log(index); 
    });

I’ve taken a screenshot so you guys can see that there are indeed JqueryUI buttons living inside that <div>. https://i.stack.imgur.com/Oefai.jpg

Thanks In advance.

EDIT

I’ve tried pushing the including of the script to last thing before closing the tag.. still nothing…

Then I tried something that I usually do when working with asynchronous requests (is that the case here??) .. wrapping everything in a setTimeout call with 500 ms delay.. It worked.

Does this make sense?

Answer 1

I suspect this is caused by the fact that you are calling the jQueryUI function button() which adds the class ui-button to the element after your selector is running.

See this example, which demonstrates that this is at very least feasible.

The solution, therefore, is to ensure you call button before trying to manipulate using the ui-button class, or use some other class to identify the elements you’re trying to select. The second point there is an important one; you must already have another class on those elements to enable you to select them to apply the button() function.