Solved

JQuery

Posted on 2013-10-23
8
132 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
  • 4
  • 3
8 Comments
 
LVL 22

Expert Comment

by:Mrunal
Comment Utility
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
Comment Utility
Something like this?
$('select.required').closest('div.1').before('<img src="image url" />');

Open in new window

0
 

Author Comment

by:cgjenkins
Comment Utility
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
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:cgjenkins
Comment Utility
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
Comment Utility
So use my first option!
$('select.required').closest('div.1').before('<img src="image url" />');

Open in new window

0
 

Author Comment

by:cgjenkins
Comment Utility
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
Comment Utility
I resolved it with .each() :).  Thanks!
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

772 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now