CODEWITHSUNDEEP
jquery
user381800
user381800

Reputation:

jQuery traversing dom to get to an element

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");
});

Upvotes: 3

Views: 782

Answers (4)

nicosantangelo
nicosantangelo

Reputation: 13716

check this https://jsfiddle.net/nicosunshine/8G4Aj/3/

The problem you had is that youre trying to get the images in the context of the select ( in your case $(this) ), so I changed that selector to $(".wrapper") so it grabs the top element that contains the img and then use find to get the img.

You can do that in other ways too, for example you could put an id in the img, and then change

$(".wrapper").find('img').css("display","block"); //gets the div with the class wrapper and finds the images that it contains and changes the css

to

$("#imgID").css("display","block"); //grabs the element with the id of imgID and changes the css

witch will be more efficient, like this fiddle

Upvotes: 0

Adam Rackis
Adam Rackis

Reputation: 83358

Why not use the jQuery change, and show functions?

$("div.some-wrapper select").change(function() { 
   $("div.more-wrapper  img").show(); 
});

Upvotes: 0

Greg Pettit
Greg Pettit

Reputation: 10830

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.

Upvotes: 0

jfriend00
jfriend00

Reputation: 707218

You need a selector that gets to the image you're trying to hide. prevAll() only looks at siblings before the starting element. You don't have any images that match that.

In the HTML you have in your jsFiddle, you could use this:

$("form select").change(function() {
    $(".more-wrapper img").show();
});

Much better that this if there's just one image would be to put an ID on the desired image so you can target it directly.

If this is a pattern that you use multiple places in the same page, then you can make one body of code that will work in all of them if you give the image a unique class and put both image and form in a common parent div with a common class name. That would look like this:

Code:

$("form select").change(function() {
    $(this).closest(".formSet").find(".toggleImage").show();
});

HTML:

<div class="formSet">
    <div class="wrapper">
        <div class="more-wrapper">
            <img class="toggleImage" 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>
</div>

P.S. .show() is a shortcut for setting display: block;

Upvotes: 1

Related Questions