过滤掉低质量图像的搜索结果
尝试过滤掉表格中包含低质量图像的搜索结果。我已在浏览器控制台中运行它并收到错误“某些内容未定义”，但至于什么，我不知道。
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;"><88 fans></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">
<a title="View Gallery 1" class="gal_title" href="/gallery.php?gid=10180382"><i><b>Gallery 1</b></i></a>
</td>
<td><center> 298 </td>
<td><center>
<img alt="Low Quality" src="/img/small_img.gif">
</td>
<td nowrap><center> 2022-02-28 </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;"><645 fans></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">
<a title="View gallery 2's" class="gal_title" href="/gallery.php?gid=10180365"><i><b>gallery 2's</b></i></a>
</td>
<td><center> 9 </td>
<td><center>
<img alt="High Definition" src="/img/huge_img.gif">
</td>
<td nowrap><center> 2022-02-28 </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's" href="/photo/1497090477/"><img class="gal_thumb" alt="Free Pics gallery 2'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's" href="/photo/1224351282/"><img class="gal_thumb" alt="Free Pics gallery 2'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's" href="/photo/1868885026/"><img class="gal_thumb" alt="Free Pics gallery 2'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's" href="/photo/1175638940/"><img class="gal_thumb" alt="Free Pics gallery 2'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>
我希望使用 img 元素的 alt 属性来识别低质量和中等质量的图像。在 src 中，它们被称为“低质量”和“中等质量”，但对于用户来说，它们只是“小”和“中等”。 因此，我以查询开始脚本以选择所有 img 元素，然后从该选择中仅选择拥有 alt 的 img 元素> 属性。最后，如果 alt 属性与 low 或“medium”匹配，则通过设置“display:none;”隐藏结果。
Attempting to filter out search results with low quality images in a table. I have run it in the browser console and receive the error something is undefined, but as to what, I am unaware of.
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;")
}
}
Here is a minimal working example of the html the script is attempting to work for.
<!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;"><88 fans></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">
<a title="View Gallery 1" class="gal_title" href="/gallery.php?gid=10180382"><i><b>Gallery 1</b></i></a>
</td>
<td><center> 298 </td>
<td><center>
<img alt="Low Quality" src="/img/small_img.gif">
</td>
<td nowrap><center> 2022-02-28 </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;"><645 fans></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">
<a title="View gallery 2's" class="gal_title" href="/gallery.php?gid=10180365"><i><b>gallery 2's</b></i></a>
</td>
<td><center> 9 </td>
<td><center>
<img alt="High Definition" src="/img/huge_img.gif">
</td>
<td nowrap><center> 2022-02-28 </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's" href="/photo/1497090477/"><img class="gal_thumb" alt="Free Pics gallery 2'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's" href="/photo/1224351282/"><img class="gal_thumb" alt="Free Pics gallery 2'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's" href="/photo/1868885026/"><img class="gal_thumb" alt="Free Pics gallery 2'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's" href="/photo/1175638940/"><img class="gal_thumb" alt="Free Pics gallery 2'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>
I am hoping to use the alt attribute of the img element to identify low and medium quality images. In the src they are referred to as "low quality" and "medium quality", but to the user they are simply "small" and "medium".
So, I begin the script with a query to select all img elements, then out of this selection, select only the img elements that possess the alt attribute. Finally, if the alt attribute matches either low or "medium" then hide the results by setting "display:none;".
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
安迪钉了它。
Andy nailed it. My elements were listed in the wrong order.