0

我有以下代码：

<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>

在第一行中，您可以看到该data-pagename="myprofile"行。我有许多这样的 HTML 代码块，具有不同的data-pagename值。

我需要能够找到与手头匹配的数据值 - 让相同的“home”或“myprofile”，然后进行一些 CSS 更改。我尝试了以下方法：

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

我不确定我做错了什么。

我可以使用这样的元素吗？

我正在使用 find ，$('div.mainMenuInternalTab')但其中有几个类 - 我应该使用带有 ID 的更高 DIV 吗？

任何建议都会很棒-如果需要可以提供更多信息。

4

3 回答 3

1

或许这 

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

或者为颜色和 zIndex 创建一个类名：

element.toggleclass("black");

更新

我现在注意到您找到了 div，然后在同一个 div 上查找数据页面名，所以也许您的意思是

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

甚至可能

$('div[data-pagename="' + urlType + '"]').css({'color': '#000000','z-index':'100'});
于 2012-10-17T05:57:20.220 回答
0

试试这个

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

或者

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

使用.find() 将搜索 div 的子元素。

但是 data 属性是针对有问题的 div 的。所以省略它

你也可以链接你的选择器

 $('div.mainMenuInternalTab').filter('[data-pagename="' + urlType + '"]')
     .css({'color': '#000000','z-index':'100'});
于 2012-10-17T05:55:18.047 回答
0

.find() 方法应用不正确。试试这个：

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

在我上面的 jQuery 中，我基本上是遍历所有实例.mainMenuInternalTab并将它们的data-pagename属性存储到一个变量中。之后，我刚刚制定了一个简单的条件语句，它基本上会根据存储的数据属性的值分配正确的样式。

你可以在jsFiddle找到我的工作示例。

于 2012-10-17T06:35:47.593 回答