SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    selecting a span inside another div, but based on a different div

    Hi,

    I am trying to add some style properties to a <span> that is within a <div class="classs-1"> but using the <div class="2"> select it.

    PHP Code:
    <div class="class-1">

        <
    div id="id1-dynamically-changed">

            <
    div class="class-2">
            </
    div>

        </
    div>

        <
    span class="class-a">    <span>
    </
    div
    How would I do this?

    Thanks!

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,613
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    You cannot assign styles to an ancestor based on the selection of a child of that ancestor.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I see. Would there be a jQuery workaround?

    Thanks

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    I see. Would there be a jQuery workaround?

    Thanks
    Assuming the structure above and that class-a is the span you want to change then something like this should work.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js "></script>
    <style>
    .added {
    	background:blue;
    	color:#fff
    }
    </style>
    </head>
    
    <body>
    <div class="class-1">
    		<div id="id1-dynamically-changed">
    				<div class="class-2"> </div>
    		</div>
    		<span class="class-a">This will change to blue </span> </div>
    <script>
    $('.class-2').closest('.class-1').find('.class-a').addClass('added');
    </script>
    </body>
    </html>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •