如何访问显示为none的元素并更改其css属性

时间:2014-04-29 16:41:56

标签: jquery html

我有一组div个标签,其属性在<a>&#39}内显示div个标签。 部分<a>代码具有data-state="clicked"属性。

我想访问这些div并将diplay更改为阻止

$(document).ready(function() {
  if(($(".display").attr("data-state") == "close") && (currenturl.indexOf("cl=true") != -1)){ 
    //I am trying to access the a tags whose attribute is clicked ,but the below is not working ... i think bse the display is none is not finding it
    var aInputs=$('a[data-state="clicked"]');
  }

  $("div").filter(function() {
    return $(this).parents('.childUI').css("display") == "none";
  });
});

我想使用以下功能获取div并显示无,并找到<a> 使用属性data-state="clicked"在其中标记,并将其属性更改为display:block ..

我正在以正确的方式前进? ..有什么建议吗?

更新以下是代码..

Before clicking
<div style="display: none;">
              <ul style="background-color:#DEECF7;" class="tert-nav">
                <li style="margin-left:1em" class="current childLink">
                  <a data-state="ntClicked" class="current" href="/businesscenter/recruitandhire/hiringadiverseworkforce/CareerPath.aspx?cl=true">CareerPath</a>
                </li>
              </ul>
            </div>

点击

            <div style="display: none;">
              <ul style="background-color:#DEECF7;" class="tert-nav">
                <li style="margin-left:1em" class="current childLink">
                  <a data-state="clicked" class="current" href="/businesscenter/recruitandhire/hiringadiverseworkforce/CareerPath.aspx?cl=true">CareerPath</a>
                </li>
              </ul>
            </div>

最终Jquery

 $('.childUI').filter(function () { 
           return $('.childUI').css('display') == 'none' &amp;&amp; $('.childUI').find('a').attr('data-state')== 'clicked'; 
          }).css('display', 'block').siblings('.display').attr({"class":"childLevelExpand","data-state":"open"});

2 个答案:

答案 0 :(得分:5)

jQuery有一个特殊的选择器来处理隐藏的元素:hidden。您的过滤功能将如下所示:

$( "div:hidden").show()

答案 1 :(得分:4)

以下代码将选择所有divs,将过滤displaynone并将其更改为block

的代码
$('div').filter(function () { 
    return $(this).css('display') == 'none' && $(this).find('a').attr('data-state') == 'clicked'; 
}).css('display', 'block');

如同在commetns中提到的那样,您也可以使用.show