CODEWITHSUNDEEP
jquery
CSharpNewBee
CSharpNewBee

Reputation: 1981

Jquery Modal and css styles

I want to set the background color of all elements within a dialog which has a class of matchedOn.

I have the following code:

$('.matchedOn').each(function () {
  if ($(this).html() == matchedItem) {
    $(this).css({ "color": "green", "background-color": "#FFFF00" });
  }
});

matchedItem is a local variable which is used to check the content of the element. So for example, if any element with a class of matchedOn, contains 'Fred', where 'Fred' is matchedItem, then set the neccessary css.

This works fine for the first tab within my modal. However, even though I have the class defined on the second tab, with 'Fred' the css isn't applied.

I have the jquery code, after all html is drawn to the modal, so it's not a issue of checking against something that isn't there.

* EDIT ** hi it's senstive data, so i can't display it all. However, each tab has the following

<div id="tab6">
            <div id="results1">
                <div class="message">
                   <h2>title</h2>
                   <pre>
                   <dl>
                   <dt>Heading</dt>
                   <dd class="matchedOn">Fred</dd>
                   </dl>
                   </pre>
                 </div>
             </div>  
      </div>
      <div id="tab7">
            <div id="results2">
                <div class="message">
                   <h2>title</h2>
                   <pre>
                   <dl>
                   <dt>Heading</dt>
                   <dd class="matchedOn">Fred</dd>
                   </dl>
                   </pre>
                 </div>
             </div>  
      </div>

So in my situation, tab six has the style applied, but not in tab7

Upvotes: 0

Views: 80

Answers (2)

YD1m
YD1m

Reputation: 5895

Check:

$('.matchedOn:contains("'+matchedItem+'")').css({ "color": "green", "background-color": "#FFFF00" });

Demo

Upvotes: 1

MikkolidisMedius
MikkolidisMedius

Reputation: 4844

The problem is that your code block is executed only once when the other tabs are hidden. Your code should also execute when the other tabs become active in order to change the CSS on visible items. You could intercept the activate event and execute your code in it:

$('.yourtabdiv').tabs({
    activate: function() {
        $('.matchedOn').each(function() {
            if($(this).html() == matchedItem) {
                $(this).css({ "color": "green", "background-color": "#FFFF00" });
            }
        });
    });

Upvotes: 1

Related Questions