• Status: Solved
  • Priority: Medium
  • Security: Private
  • Views: 55
  • Last Modified:

Find an element in dom with jquery

I'm trying to write a bit of script using jquery that will return the h3.the-thing-title text where the sibling selected option value is 6.  In other words I'm trying to get h3 text where the adjacent select has 6 selected.
$('.blue').find('.house-number[value="6"][selected="selected"]') and it's not even close to working.  Any ideas how
I can do this?  I just need to get the h3 text which would be Derp 2 in this case.

<div class="blue">
    <div class="the-thing">
        <h3 class="the-thing-title">Derp 1</h3>
        <div class="col-four">
            <select class='house-number'>
                <option value="0">Zero</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3" selected="selected">Three</option>
                <option value="4">Four</option>
                <option value="5">Five</option>
                <option value="6">Six</option>
            </select>
        </div>
    </div>
</div>
<div class="blue">
    <div class="the-thing">
        <h3 class="the-thing-title">Derp 2</h3>
        <div class="col-four">
            <select class='house-number'>
                <option value="0">Zero</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
                <option value="5">Five</option>
                <option value="6" selected="selected">Six</option>
            </select>
        </div>
    </div>
</div>
<div class="blue">
    <div class="the-thing">
        <h3 class="the-thing-title">Derp 3</h3>
        <div class="col-four">
            <select class='house-number'>
                <option value="0">Zero</option>
                <option value="1" selected="selected">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                <option value="4">Four</option>
                <option value="5">Five</option>
                <option value="6">Six</option>
            </select>
        </div>
    </div>
</div>

Open in new window

0
tf2012
Asked:
tf2012
1 Solution
 
Julian HansenCommented:
This should work
<script>
$(function() {
  $('.blue option:selected').each(function(i, e) {
    if (e.value == 6) {
      var text = $(e).closest('.the-thing').find('h3').text();
      console.log(text);
    }
  });
});
</script>

Open in new window

The script loops through all option elements that are children of elements with the class .blue and that are selected and tests their value to see if it is 6.
When one is found it then reverse traverses the tree using closest() to find the closest ancestor with class .the-thing. From there we use .find() to find the <h3> and return its text.
0
 
tf2012Author Commented:
Thank you I'll give it a shot!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now