JQuery Modify Element's Style By Title

Question

With this html:

<div class="outer">
    <div class="inner">
        <span class="selection" title="Green"></span>
    </div>
    <div class="inner">
        <span class="selection" title="Yellow"></span>
    </div>
    <div class="inner">
        <span class="selection" title="Red"></span>
    </div>
</div>

and this existing jQuery which can be changed as necessary:

$(document).ready(function(){
    $('.outer .inner span.selection').each(function(){
        if($(this).attr('title', 'Green')) {
            $(this).parent().css('background-color', 'green');
        }
        if($(this).attr('title', 'Yellow')) {
            $(this).parent().css('background-color', 'yellow');
        }
        if($(this).attr('title', 'Red')) {
            $(this).parent().css('background-color', 'red');
        }
    });
});

Essentially this only displays a single item in a dropdown. I'm looking to change the list item displayed as a single color. Other list items that aren't selected are hidden.

your question is unclear, please could you clarify?

billyonecan
– billyonecan

2016-01-19 15:36:35 +00:00
Commented Jan 19, 2016 at 15:36 — billyonecan
– billyonecan, Commented Jan 19, 2016 at 15:36

Gabriel Rodrigues · Accepted Answer · 2016-01-19 15:22:41Z

2

You are setting the value to the title and not comparing, try this:

$(document).ready(function() {
  $('.outer .inner span.selection').each(function() {
    var title = $(this).attr('title');
    console.log(title);
    if (title === 'Green') {
      $(this).parent().css('background-color', 'green');
    }
    if (title === 'Yellow') {
      $(this).parent().css('background-color', 'yellow');
    }
    if (title === 'Red') {
      $(this).parent().css('background-color', 'red');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outer">
  <div class="inner">
    <span class="selection" title="Green">Green</span>
  </div>
  <div class="inner">
    <span class="selection" title="Yellow">Yellow</span>
  </div>
  <div class="inner">
    <span class="selection" title="Red">Red</span>
  </div>
</div>

answered Jan 19, 2016 at 15:22

Gabriel Rodrigues

5301 gold badge8 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

marcwebdude Over a year ago

Excellent! I'll try it out. Thanks for the fast reply.

marcwebdude Over a year ago

This working when all of the div elements are displayed, but not when they are hidden and selected from the dropdown list. I'm modifying it to try and figure out the problem.

Clemens Himmer Over a year ago

Yay, you stored the attribute value in a variable!

Clemens Himmer Over a year ago

@MarcusFaye that is another dependency, for this issue ask another question, multiple question where only is supposed to be are always bad. This code answer solves your issue as you didn't give more enviormental variables, i suppose.

marcwebdude Over a year ago

Here's the more specific expansion of this question, certain variables are adjusted to be more specific stackoverflow.com/questions/34882354/…

Mikkel Fennefoss · Accepted Answer · 2016-01-19 15:33:49Z

Hi im not exactly sure what you mean with your question. But are you trying to get individual color put as the background for the sections, instead of just the last color that it checks for?

You need to set the value to what equals the title instead of comparing it. I fixed it in this code pen: http://codepen.io/anon/pen/eJeKgZ

$(document).ready(function(){
    $('.outer .inner span.selection').each(function(){
        if($(this).attr('title') == 'green') {
            $(this).parent().css('background-color', 'green');
        }
        if($(this).attr('title') == 'yellow') {
            $(this).parent().css('background-color', 'yellow');
        }
        if($(this).attr('title') == 'red') {
            $(this).parent().css('background-color', 'red');
        }
    });
});

Collectives™ on Stack Overflow

JQuery Modify Element's Style By Title

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related