jQuery的發現數據元素

我有以下代碼：jQuery的發現數據元素

<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"線。我有不同的data-pagename值的HTML代碼塊這樣的代碼。

我需要能夠找到與手頭上匹配的數據值 - 讓相同的'home'或'myprofile'，然後進行一些CSS更改。我試過以下內容：

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

我不確定我在做什麼錯。

我可以使用這樣的元素嗎？

我在$('div.mainMenuInternalTab')上使用查找，但有幾個這些類 - 我應該使用ID更高的DIV嗎？

任何建議將是偉大的 - 可以給更多的信息，如果需要的話。

來源

2012-10-17 Adam

也許這

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

或者是創建該顏色的類名和zIndex的：

element.toggleclass("black");

UPDATE

現在我注意到你找到格，然後尋找一個數據頁面名稱上的相同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-17 05:57:20 mplungjan

感謝它真的很好...需要按照您的建議放棄.find（）...將在時間限制過去時打勾...乾杯 – Adam

請參閱更新 – mplungjan

試試這個

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

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

使用.find(）將搜索它們的div孩子的元素。

但數據屬性是針對有問題的div。所以忽略它

你也可以連接你的選擇

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

來源

2012-10-17 05:55:18

的.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。

來源

2012-10-17 06:35:47 vynx

jQuery的發現數據元素

回答

相關問題