Question

I am having a hard time figuring out how to correctly and most efficiently traverse the DOM to select the element I need.

Basically I need it where when the select statement is changed, it would change an element’s CSS to display block. Initially it is display NONE.

I currently am trying to use prevAll() but obviously it isn’t working…

Please see https://jsfiddle.net/8G4Aj/ for live sample

HTML:

<div class="wrapper">
    <div class="more-wrapper">
        <img src="http://someimage.png" alt="image" />
    </div>    
</div>

<div class="another-wrapper">
    <div class="some-wrapper">
        <form>
            <select>
                <option value="1">1</option>
                <option value="2">2</option>
            </select>
        </form>
    </div>
</div>

JavaScript:

$("form select").change(function() {
    $(this).prevAll('img').css("display","block");
});

Answer 1

I can’t help wondering if you’re making this more complicated than it needs to be. It SEEMS like a case where some additional classes could help.

But, I failed to create that sort of scenario. So I did this instead:

https://jsfiddle.net/8G4Aj/4/

$("form select").change(function() {
    $(this).closest('.another-wrapper').prev().find('img').css("display","block");
});

Up the tree to another-wrapper then to its previous sibling (wrapper), then dig back into that div for the image.