隐藏子元素,如果它们包含href ==#

时间:2017-05-16 08:38:13

标签: javascript jquery

如果#wrapper div.part属性等于a href,我如何隐藏每个#?我尝试过这个并没有用:

$("document").ready(function() {
  $('#wrapper > div.part a').each(function() {
    if (this == "#") {
      $(this).hide();
    } else {
      $(this).show();
    };
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 1</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 2</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 3</a>
  </div>
</div>

我是jQuery的新手,很抱歉,如果它是基本的。

5 个答案:

答案 0 :(得分:1)

要执行此操作,您可以按href选择closest()元素,然后获取.parthide()$('#wrapper .part a[href="#"]').closest('.part').hide(); 。试试这个:

$('#wrapper .part a[href="#"]').closest('.part').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 1</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 2</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 3</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="somepage.html">Link 4</a>
  </div>
</div>
$('#wrapper .part:has(a[href="#"])').hide();

或者更简洁,感谢@ T.J。克劳德:

<%= simple_form_for :post do |f| %>
  <%= f.error_notification %>
  <%= f.input :title %>
  <%= f.input :body %>
  <%= f.button :submit %>
<% end %>

答案 1 :(得分:0)

以下是您要找的内容:

&#13;
&#13;
$("document").ready(function () {
    $('#wrapper > div.part a').each(function() {
            if ($(this).attr('href') == "#") {
                $(this).hide();
            }
            else {
                $(this).show();
            };
    });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 1</a>
    </div>
    <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 2</a>
    </div>
    <div class="part">
        <p>Some text here...</p>
        <a href="">Link 3</a>
    </div>
</div>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

根据我的建议,只需在css

中使用即可

&#13;
&#13;
#wrapper .part a[href='#']{
display:none;
}
&#13;
<div id="wrapper">
      <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 1</a>
      </div>
      <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 2</a>
      </div>
      <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 3</a>
      </div>
    </div>
&#13;
&#13;
&#13;

适用于javascript

您可以像$(this).attr('href')

一样使用

&#13;
&#13;
$("document").ready(function() {
  $('#wrapper > div.part a').each(function() {
    if ($(this).attr('href') == "#") {
      $(this).hide();
    } else {
      $(this).show();
    };
  });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 1</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 2</a>
  </div>
  <div class="part">
    <p>Some text here...</p>
    <a href="#">Link 3</a>
  </div>
</div>
&#13;
&#13;
&#13;

答案 3 :(得分:0)

&#13;
&#13;
$("document").ready(function () {
    $('#wrapper > div.part a').filter(function() {
           return $(this).attr('href') == "#"
    }).parent('div.part').hide()
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 1</a>
    </div>
    <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 2</a>
    </div>
    <div class="part">
        <p>Some text here...</p>
        <a href="#1">Link 3</a>
    </div>
</div>
&#13;
&#13;
&#13;

  1. 使用.filter()
  2. 使用href ==#
  3. 返回匹配a
  4. 使用课程部分
  5. 隐藏其父级

答案 4 :(得分:0)

带有google链接的示例...

使用attr()函数,您可以读取元素的特定属性。 每个函数还提供当前元素作为函数的参数。你应该避免在嵌套函数中使用“this”,因为根据上下文它可能会有所不同。

$('#wrapper > div.part a').each(function(index,element) {
            if ($(element).attr("href") == "#") {
                $(element).hide();
            }
            else {
                $(element).show();
            };
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 1</a>
    </div>
    <div class="part">
        <p>Some text here...</p>
        <a href="http://google.de">Link to google</a>
    </div>
    <div class="part">
        <p>Some text here...</p>
        <a href="#">Link 3</a>
    </div>
</div>