Question

I have following code:

<div id="mainMenuInternalMyProfile" class="mainMenuInternalTab" data-pagename="myprofile">
  <div class="mainMenuInternalTabClickable">&nbsp;</div>
    <h4 class="mainMenuInternalTitle">MY PROFILE</h4>
    <img src="images/main-menu-divider.png" class="mainMenuBackGroundDivider" alt="Dating Internal Menu Background Divider">
    <img src="images/main-menu-selected.png" class="mainMenuBackSelected mainMenuBackSelectedOption" alt="Dating Internal Menu Selected">
  </div>

In the first line you can see the data-pagename="myprofile" line. I have a number of HTML chucks of code like this with different data-pagename values.

I need to be able to locate the data value that matches then one on hand – lets same ‘home’ or ‘myprofile’ and then make some CSS changes. I’ve tried the following:

var element = $('div.mainMenuInternalTab').find("[data-pagename='" + urlType + "']");
element.css({'color': '#000000','z-index':'100'});

I’m not sure what I’m doing wrong.

Can I use element like this?

I’m using find on $('div.mainMenuInternalTab') but there are several of these classes – should I use a higher up DIV with ID?

any advise would be great – can give more info if needed.

Answer 1

Perhaps this

$('div.mainMenuInternalTab').each(function() {
  var element = $(this).find("[data-pagename='" + urlType + "']");
  element.css({'color': '#000000','z-index':'100'});
}

or perhaps create a classname for the color and zIndex:

element.toggleclass("black");

UPDATE

I now notice you find the div and then look for a data-pagename on the same div so perhaps you mean

$('div[data-pagename="' + urlType + '"]').each(function() {
  $(this).css({'color': '#000000','z-index':'100'});
}

or maybe even

$('div[data-pagename="' + urlType + '"]').css({'color': '#000000','z-index':'100'});