javascript - 仅隐藏某些元素

Question

我正在使用一个脚本来检查任何也有 SRC="self"的标签。我的函数应该像这样运行:

1. 检查是否 img src="self"
2. 如果为真，隐藏父div
3. 如果为假，什么也不做

目前，该函数实际上隐藏了每个 img，而不管 src。如果我替换 jQuery hide() 操作，那么该函数将完美运行。它似乎并没有像我预期的那样完全执行隐藏功能。

function changeSourceAll() {
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        if (images[i].src.indexOf('self') !== -1) {
            $(".redditThumbnail").hide();
        }
        else (){}
    }
}
changeSourceAll();

示例 HTML 如下。我有多个与此相同的 .listrow div 元素，该函数删除了所有 .redditThumbnail div。

<div class="listrow news">
    <div class="newscontainer">
        <div class="redditThumbnail"></div>
        <div class="articleheader news">
            <div class="actionmenu">
                <p class="mediumtext floatleft alignleft">
                    author
                </p>
                <div id="redditUsername"></div>
                <div class="floatright">
                    <div class="redditPermalink material-icons"></div>
                </div>
            </div>
            <p class="redditTitle mediatitle news"></p>
        </div>
    </div>
</div>

谢谢!

Answer 1

你可以使用 attribute-equals selector找到所有的 <img>指向“ self ”然后隐藏其 parent 的元素:

// Hide the closest thumbnail for elements that match this constraint
$('img[src="self"]').closest('.redditThumbnail');

示例

$(function() {
  $('button').click(function(){
      $('img[src="self"]').closest('.redditThumbnail').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='redditThumbnail'>
  A (has self)
  <img src='self' />
</div>
<div class='redditThumbnail'>
  B (doesn't have self)
  <img src='self-test' />
</div>
<div class='redditThumbnail'>
  C (has self)
  <img src='self' />
</div>
<hr />
<button>Hide Self-Referencing Images</button>