返回

javascript——过滤掉低质量图片的搜索结果

发布时间:2022-09-11 00:34:02 505
# 前端

试图过滤掉表格中包含低质量图像的搜索结果。我已经在浏览器控制台中运行它并收到错误 something is undefined,但至于什么,我不知道。

var imgTag = document.querySelectorAll('img > center');

var imgSize = ['Low Quality', 'Medium Quality'];

for (i = 0; i < imgTag.length; ++i) {

  var imgElm = imgTag[i];

  var indic = false;

  for (j = 0; j < imgSize.length; ++j) {

    var size = imgSize[j];

    if (imgElm.getAttribute("alt").match(size)) {

      indic = true;

      break;

    }

  }

  if (indic) {

    var p = imgElm.parentNode.parentNode.parentNode;

    p.setAttribute("style", "display:none;")

  }

}

这是脚本尝试使用的 html 的最小工作示例。

<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Minimal Example</title>

  </head>

  <body>

    <table border="1px">

      <td align="center" valig="top">

            <div class="avatar" style="height: 140px; width: 100px;"><a class="gal_title" style="font-size: 11px;" href="/profile/User00">User00</a><br />

                    <a class=link3 href="/profile/User00"><img alt="User00's profile" style="border: solid 1px #CCCCCC;" width="90" height="90" src="/img/unknown.jpg"><img class="uonline" src="/img/online.png" title="User00 is online!"></a><div class="opt" style="clear: left;  width: 80%;"><div class="random icon"></div><div class="country iconCountry" style="background:url(/images/country/AT.gif 0 0 no-repeat;"></div><div class="sendmail"><a href="/login.php?backurl=http%3a%2f%2fwww.example.com%2fmessage.php%3fuid%0123456"><img border=0 src="/img/pm.gif"></a></div><div class="clear"></div></div><div class="subscribers" style="clear: left;">&lt;88 fans&gt;</div></div>

    </td>

<td align="left" valign="top" style="font-size: 10px;" nowrap>

                </td>

</tr>

    <tr id="10180382" bgcolor="#E5E5E5" style="border-top: dotted 1px #000000;">

                <td width="70%">

            <img style="margin-top: -6px;" align="absmiddle" src="/img/arrow-r.gif">&nbsp;

            <a title="View Gallery 1" class="gal_title" href="/gallery.php?gid=10180382"><i><b>Gallery 1</b></i></a>&nbsp;&nbsp;

        </td>

        <td><center>&nbsp;298&nbsp;</td>

        <td><center>

                            <img alt="Low Quality" src="/img/small_img.gif">

                    </td>

                <td nowrap><center>&nbsp;2022-02-28&nbsp;</td>

                    </tr>

                    <tr valign="top">

                <td colspan="3">

                                                                            <table><tr>

                            <!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1"  href="/photo/1986223183/"><img class="gal_thumb" alt="Free gallery 1 1 of  pics" src="https://cdnh.example.com/images/mini/111/198/1986223183.jpg?se=1646123719&ss=ae7f157355b3929e45ed7bbe9923eb1c"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1"  href="/photo/1894873412/"><img class="gal_thumb" alt="Free Pics Gallery 1 2 of  pics" src="https://cdnh.example.com/images/mini/109/189/1894873412.jpg?se=1646123719&ss=5428161f964b796b070d593a1a9766e5"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1"  href="/photo/98075857/"><img class="gal_thumb" alt="Free Pics Gallery 1 3 of  pics" src="https://cdnh.example.com/images/mini/108/980/98075857.jpg?se=1646123719&ss=ef8e4e29c3ffb0384f772122eb1dde73"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View Gallery 1"  href="/photo/1957776812/"><img class="gal_thumb" alt="Free Pics Gallery 1 4 of  pics" src="https://cdnh.example.com/images/mini/111/195/1957776812.jpg?se=1646123719&ss=ece6a38a3a982156dea6ba2d56ba2c1e"></a></td><!--</div>-->                      

</tr>

</table>

</td>

<td align="center" valig="top">

            <div class="avatar" style="height: 118px; width: 100px;"><a class="gal_title" style="font-size: 11px;" href="/profile/User2">User2</a><br />

                    <a class=link3 href="/profile/User2"><img alt="User2's profile" style="border: solid 1px #CCCCCC;" width="90" height="68" src="https://cdnh.example.com/images/thumb/107/190/1904213141.jpg?se=1646122316&ss=539cad588fc95070e9f071e075c92083"></a><div class="opt" style="clear: left;  width: 80%;"><div class="random icon"></div><div class="country iconCountry" style="background:url(/images/country/GB.gif 0 0 no-repeat;"></div><div class="sendmail"><a href="/login.php?backurl=http%3a%2f%2fwww.example.com%2fmessage.php%3fuid%3d1234564"><img border=0 src="/img/pm.gif"></a></div><div class="clear"></div></div><div class="subscribers" style="clear: left;">&lt;645 fans&gt;</div></div>

    </td>

<td align="left" valign="top" style="font-size: 10px;" nowrap>

                </td>

</tr>

    <tr id="10180365" bgcolor="#E5E5E5" style="border-top: dotted 1px #000000;">

                <td width="70%">

            <img style="margin-top: -6px;" align="absmiddle" src="/img/arrow-r.gif">&nbsp;

            <a title="View gallery 2&#039;s" class="gal_title" href="/gallery.php?gid=10180365"><i><b>gallery 2&#039;s</b></i></a>&nbsp;&nbsp;

        </td>

        <td><center>&nbsp;9&nbsp;</td>

        <td><center>

                            <img alt="High Definition" src="/img/huge_img.gif">

                    </td>

                <td nowrap><center>&nbsp;2022-02-28&nbsp;</td>

                    </tr>

                    <tr valign="top">

                <td colspan="3">

                                                                            <table><tr>

                            <!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2&#039;s"  href="/photo/1497090477/"><img class="gal_thumb" alt="Free Pics gallery 2&#039;s 1 of  pics" src="https://cdnh.example.com/images/mini/111/149/1497090477.jpg?se=1646123719&ss=8b9080bfc00940efaedb6d20802d8194"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2&#039;s"  href="/photo/1224351282/"><img class="gal_thumb" alt="Free Pics gallery 2&#039;s 2 of  pics" src="https://cdnh.example.com/images/mini/108/122/1224351282.jpg?se=1646123719&ss=8b1a588d762dfedd9b3255a0e80d0a1b"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2&#039;s"  href="/photo/1868885026/"><img class="gal_thumb" alt="Free Pics gallery 2&#039;s 3 of  pics" src="https://cdnh.example.com/images/mini/108/186/1868885026.jpg?se=1646123719&ss=d8acaa7d781a55654e685dac1db4e628"></a></td><!--</div>--><!--<div style="float: left; width: 148px; text-align: center;">--><td width="148" align="center"><a title="View gallery 2&#039;s"  href="/photo/1175638940/"><img class="gal_thumb" alt="Free Pics gallery 2&#039;s 4 of  pics" src="https://cdnh.example.com/images/mini/111/117/1175638940.jpg?se=1646123719&ss=81c93da5afd1572bc5a6c0d5f4982a8f"></a></td><!--</div>-->                           

</tr>

</table>

    </table>

  </body>

</html>

我希望使用元素的alt属性img来识别低质量和中等质量的图像。在 src 中,它们被称为“低质量”和“中等质量”,但对于用户来说,它们只是“小”和“中”。因此,我以查询开始脚本以选择所有img元素,然后在此选择中仅选择img具有该alt属性的元素。最后,如果alt属性匹配low或匹配“medium”,则通过设置“display:none;”隐藏结果。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(1)
按点赞数排序
用户头像