仅隐藏某些元素

Question

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

1. 检查是否img src="self"
2. 如果为true，则隐藏父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查找指向“self”的所有<img>元素，然后隐藏其父母：

// 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>

Answer 2

隐藏每个img的问题是因为您为每个匹配项选择并隐藏所有.redditThumbnail元素。要解决这个问题，你可以使用它：

$(images[i]).closest('.redditThumbnail').hide();

然而，更好的方法是使用filter()并仅查找符合要求的.redditThumbnail元素。试试这个：

$('.redditThumbnail').filter(function() {
    return $(this).find('img[src="self"]').length != 0;
}).hide();

Answer 3

你隐藏了所有：$(".redditThumbnail").hide();。我想你应该做$(images[i]).hide();

之类的事情