Question

我有以下代码：

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

我不确定我做错了什么。

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

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

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

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

Answer 2

试试这个

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

OR

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

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

但数据属性是针对div的问题。省略它

您也可以链接您的选择器

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

Answer 3

.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找到我的工作示例here。

Jquery查找数据元素

3 个答案: