[英]Hide a tr only if td contains no content AFTER a specific html tag
Is it possible to examine the content within a tr, AFTER an html element (br) to see if any exists? 是否可以在html元素(br)之后检查tr中的内容,以查看是否存在? If there is no content after the br element, I'd like to hide the parent td.
如果br元素后没有任何内容,我想隐藏父td。 Please note that the html code is system generated and I cannot edit it.
请注意,html代码是系统生成的,我无法对其进行编辑。
I'm just not sure where to begin with this. 我只是不确定从哪里开始。 Any help is greatly appreciated.
任何帮助是极大的赞赏。
<table class="tabledefault"> <tbody> <tr> <td id="customfields"> <table class="tabledefault"> <tbody> <tr><!-- this TR should be hidden --> <td id="CAT_Custom_451068"><strong>Laser Tag</strong> <br> </td> </tr> <tr> <td id="CAT_Custom_451069"><strong>Arcade</strong> <br>Selected </td> </tr> <tr> <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong> <br>False </td> </tr> <tr> <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong> <br>True</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
Yes, you just get the tr
s, then find out if the first <br>
element inside the first <td>
has any following element siblings (I'm making an assumption there, that you don't want those hidden), or any following text node siblings that aren't blank. 是的,您只需要获取
tr
,然后找出第一个<td>
内的第一个<br>
元素是否具有以下任何元素同级(我假设在那里,您不想隐藏这些同级元素),或者以下所有不为空的文本节点兄弟姐妹。 jQuery's contents
is handy for that, as it includes text nodes. jQuery的
contents
很方便,因为它包括文本节点。 I'd probably loop through them backward: 我可能会向后循环遍历它们:
$("#customfields .tabledefault tr").each(function(index) {
var $tr = $(this);
$tr.find("td:first").contents().get().reverse().some(function(node) {
if (node.nodeName.toUpperCase() === "BR") {
// Hide it, and we're done looping
$tr.hide();
return true;
}
if (node.nodeType != 3 || $.trim(node.nodeValue)) {
// Don't hide it, and we're done looping
return true;
}
});
});
I expect that can be optimized, but you get the idea. 我希望可以对其进行优化,但是您会明白的。
Live Example: 现场示例:
var counter = 3; tick(); function tick() { $("#countdown").text(counter--); if (counter < 0) { hideIt(); } else { setTimeout(tick, 500); } } function hideIt() { $("#customfields .tabledefault tr").each(function(index) { var $tr = $(this); $tr.find("td:first").contents().get().reverse().some(function(node) { if (node.nodeName.toUpperCase() === "BR") { // Hide it, and we're done looping $tr.hide(); return true; } if (node.nodeType != 3 || $.trim(node.nodeValue)) { // Don't hide it, and we're done looping return true; } }); }); }
<table class="tabledefault"> <tbody> <tr> <td id="customfields"> <table class="tabledefault"> <tbody> <tr> <!-- this TR should be hidden --> <td id="CAT_Custom_451068"><strong>Laser Tag</strong> <br> </td> </tr> <tr> <td id="CAT_Custom_451069"><strong>Arcade</strong> <br>Selected </td> </tr> <tr> <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong> <br>False </td> </tr> <tr> <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong> <br>True</td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="countdown"> </div>
Try using .each()
, nextSibling
, nodeValue
, String.prototype.match()
, .closest()
尝试使用
.each()
, nextSibling
, nodeValue
, String.prototype.match()
.closest()
$("table tr td br").each(function(i, el) { // if `br` next sibling does not contain alphanumeric characters, // hide parent `tr` element if (el.nextSibling.nodeType === 3 && el.nextSibling.nodeValue.match(/\\w+/) === null || $(el).next(":empty").length) { $(this).closest("tr").hide() } })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <table class="tabledefault"> <tbody> <tr> <td id="customfields"> <table class="tabledefault"> <tbody> <tr><!-- this TR should be hidden --> <td id="CAT_Custom_451068"><strong>Laser Tag</strong> <br><span></span> </td> </tr> <tr> <td id="CAT_Custom_451069"><strong>Arcade</strong> <br>Selected </td> </tr> <tr> <td id="CAT_Custom_450908"><strong>Bounce House (45 minutes) $100</strong> <br>False </td> </tr> <tr> <td id="CAT_Custom_451307"><strong>Party Room Rental (per hour) $75</strong> <br>True</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.