JQuery

I am trying to put an icon before a series of dom elements that contain a required select.  

For example, I have the following div structures:
<div class="1">
    <div class="2">
        <select class="required">
    </div>
</div>

<div class="1">
    <div class="2">
        <select>
    </div>
</div>

I need to place the required icon in front of <div class="1"> that contains <select class="required">.

When I tried to do that it placed it in front of all <div class="1"> instead of just the <div class="1"> containing the <select class="required">.

How do I get it to show up in front of just the divs that contain the required select?

Thanks!
cgjenkinsAsked:
Who is Participating?
 
Alexandre SimõesConnect With a Mentor Manager / Technology SpecialistCommented:
So use my first option!
$('select.required').closest('div.1').before('<img src="image url" />');

Open in new window

0
 
MrunalCommented:
Hi
Can you share more information like how it is currently looking and how exactly you want it to look?

also share css definition for "required" and all others.
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Something like this?
$('select.required').closest('div.1').before('<img src="image url" />');

Open in new window

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
cgjenkinsAuthor Commented:
Here is the script:
$('div.1').ready(function() {
    if ($('h5').children('select.required') && !$(this).next().is('span.required')) {
        $('div.1').before('<span class="required">&nbsp;</span>');

    }
});
0
 
Alexandre SimõesManager / Technology SpecialistCommented:
Be aware that the div might break the line.
If the image is related to the select you might also consider put it before (or after) the select itself:
$('select.required').before('<img src="image url" />');

Open in new window

0
 
cgjenkinsAuthor Commented:
I have tried that, but the select is wrapped in two divs (I didn't create it, I just have to deal with it :) ), so the icon has to go outside of div.1.
0
 
cgjenkinsAuthor Commented:
That one almost works.  However, if I have two div.1s with select.required, I get two icons outside of the first div.1 Instead of one outside of each div.1 that has a required select.  See two required icons
0
 
cgjenkinsAuthor Commented:
I resolved it with .each() :).  Thanks!
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.

All Courses

From novice to tech pro — start learning today.