Jquery find data element

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.

mplungjan · Accepted Answer · 2012-10-17 06:02:30Z

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'});

edited Oct 17, 2012 at 6:02

answered Oct 17, 2012 at 5:57

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

1 Comment

Adam Over a year ago

thanks it works really well... needed to drop the .find() as you suggested... will tick when the time limit passes... cheers

Sushanth -- · Accepted Answer · 2012-10-17 05:55:18Z

0

Try this

element = $('div.mainMenuInternalTab[data-pagename="' + urlType + '"]');

OR

element = $('div.mainMenuInternalTab').filter('[data-pagename="' + urlType + '"]');

Using .find() will search the elements which are children of the div .

But the data attribute is for the div in question. So omit it

You can also chain your selector

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

answered Oct 17, 2012 at 5:55

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

scornork · Accepted Answer · 2012-10-17 06:35:47Z

The .find() method is applied incorrectly. Try this instead:

HTML

<div id="mainMenuInternalMyProfile" class="mainMenuInternalTab" data-pagename="example1">
    <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>

<div id="mainMenuInternalMyProfile" class="mainMenuInternalTab" data-pagename="example2">
    <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>

jQuery

$(document).ready(function() {
    $(".mainMenuInternalTab").each(function() {
        var _this = $(this);
        var pageName = _this.data("pagename");
        var urltype1 = "example1";
        var urltype2 = "example2";
        if (pageName === urltype1) {
            _this.css({
                "font-size": "5px"
            })
        } else if (pageName === urltype2){
           _this.css({
                "font-size": "25px"
           })
        }
    });
});

In my jQuery above, I'm basically running through all the instances of .mainMenuInternalTab and storing their data-pagename attribute into a variable. Following which, I just worked out a simple conditional statement that will basically assign the correct styles based on the stored data attribute's value.

You can find my working example here at jsFiddle.

Collectives™ on Stack Overflow

Jquery find data element

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related