设置节点的每个元素都可见

时间:2014-02-27 23:02:41

标签: javascript jquery html hidden

我得到了这个:$(element).parents('.text_place_large'),其中包含此内容(我通过alert($(element).parents('.text_place_large').html());验证了它:

<div class="before_com">
  <div class="nom_util">
    <a href="1" title="Voir le profil de shidenelyu">
      shideneyu
    </a>
  </div>
  <div class="mod_button">
    <a id="report1" onclick="" class="t_hideOnClickOutside" style="background-color: red; color: white;">
      !
    </a>
    <a onclick="" title="Supprimer">
      x
    </a>
    <a onclick="" title="Editer">
      Editer
    </a>
    <a onclick="" title="El button">
      Citer
    </a>
  </div>
  <div class="permalink">
    Lien Permanent 
  </div>
</div>
<div class="text_com">
  <p>
    Cats are sweet with salt
  </p>
</div>
<div class="after_com">
  <div class="partage">
    <img alt="Twitter" src="/assets/twitter.png">
    <img alt="Facebook" src="/assets/facebook.png">
    <img alt="G+" src="/assets/g+.png">
  </div>
  <a href="#" style="font-size: 10px">
    <abbr>
      a day ago
    </abbr>
  </a>
</div>

我想为此节点的每个标记添加内联样式,以将其设置为可见(例如,<div class="after_com">将变为<div class="after_com style='visibility: visible;'">

我尝试设置循环,但似乎我甚至无法获得单个元素。

$(element).parents('.text_place_large').each(function () {
  alert(this); // It returns two times '[object HTMLDivElement]'
});
编辑:我被要求提供更多代码:

<div class="bloc_com_contre" id="1">
  <aside>
    <div alt="\r\n\t\t\t\t\t\t\t\t$pseudo &lt;img style='float:right' src='img/actualise.jpg' /&gt; &lt;br&gt;\r\n\t\t\t\t\t\t\t\t$description &lt;br&gt;\r\n\t\t\t\t\t\t\t\t$categories\t&lt;br&gt;\r\n\t\t\t\t\t\t\t\tMsg : $msg_count\r\n\t\t\t\t\t\t\t\t" class="bordure_avatar avatar_du_commentaire">
      <img alt="shideneyu" class="bigavatar" src="https://secure.gravatar.com/avatar/4ae4aa6bebac9381d575948b9b9cc59a?s=100&amp;d=http%3A%2F%2Fwww.la-matrice.org%2Fwp-content%2Fuploads%2F2013%2F09%2FAnonymous.png">
    </div>
    <div class="plussoie">
      <span>
        +X
      </span>
      <img alt="Flechecontre" src="/assets/flechecontre.png">
    </div>
  </aside>
  <div class="text_place_large">
    <div class="before_com">
      <div class="nom_util">
        <a href="1" title="Voir le profil de shideneyu">
          shideneyu
        </a>
      </div>
      <div class="mod_button">
        <a id="report1" onclick="" class="t_hideOnClickOutside" style="background-color: red; color: white;">
          !
        </a>
        <a onclick="" title="Supprimer">
          x
        </a>
        <a onclick="" title="Editer">
          Editer
        </a>
        <a onclick="" title="El button">
          Citer
        </a>
      </div>
      <div class="permalink">
        Lien Permanent 
      </div>
    </div>
    <div class="text_com">
      <p>
        Cats are sweet with salt
      </p>
    </div>
    <div class="after_com">
      <div class="partage">
        <img alt="Twitter" src="/assets/twitter.png">
        <img alt="Facebook" src="/assets/facebook.png">
        <img alt="G+" src="/assets/g+.png">
      </div>
      <a href="#" style="font-size: 10px">
        <abbr>
          a day ago
        </abbr>
      </a>
    </div>
  </div>
</div>

一些css:

.text_place_large .after_com{
  display : inline-block;
  visibility: hidden;
  position: absolute;
  bottom: 0; 
  width : 100%;
}

.text_place_large .before_com .mod_button a{
  padding:5px;
  border-radius:0.3em;
  background-color: rgba(255,255,255,0.5);
  border:1px solid black;
  font-weight: bold;
  visibility: hidden;
}

.before_com .permalink{
   font-size: 10px;
   color: #777;
   line-height: 16px;
   margin-top: -5px;
   visibility: hidden;
}

2 个答案:

答案 0 :(得分:1)

你走了! FIDDLE

$(document).ready(function() {
    $('.showmydiv').click(function(e) {
        e.preventDefault();
        $(this).parents('.text_place_large').children().css({visibility: 'visible'});
    });
});

答案 1 :(得分:0)

您应该使用display:none而不是visible:hidden