Solved

JQuery

Posted on 2013-10-23
8
136 Views
Last Modified: 2013-10-23
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!
0
Comment
Question by:cgjenkins
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 39593871
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39593896
Something like this?
$('select.required').closest('div.1').before('<img src="image url" />');

Open in new window

0
 

Author Comment

by:cgjenkins
ID: 39593899
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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 39593907
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
 

Author Comment

by:cgjenkins
ID: 39593946
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
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39594043
So use my first option!
$('select.required').closest('div.1').before('<img src="image url" />');

Open in new window

0
 

Author Comment

by:cgjenkins
ID: 39594316
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
 

Author Closing Comment

by:cgjenkins
ID: 39594454
I resolved it with .each() :).  Thanks!
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to calculate height of a text using jquery 3 42
Validating Date Part2 2 27
converting document.write() to innerHTML 7 50
Check input text, Number 7 35
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question