jQuery - ForEach function on rendered HTML

Question

I have the following JS/jQuery which grabs the cell value of an ASP DetailsView control (rendered HTML), checks it for a condition, and hides a div based on said condition. It is basically checking to see if the cell value is formatted like an IP address or not...

$(document).ready(function () {
    //Grab innerHTML in the IPAddress cell from DetailsView1
    //See if it contains the characters: 10.
    //If it does not contain '10.', hide the parent div for that user
    var ip = document.getElementById("DetailsView1").rows[3].cells[0].innerHTML;
    var addrFormat = ip.includes("10.");
    if (addrFormat == false) {
        $("#IDofDetailsView1ParentDiv").hide();
    }
});

This works well, but I need to check several DetailsView controls, and potentially .hide() several elements by ID.

In JS/jQuery, is there a way to:

ForEach rendered HTML element like DetailsView, check format condition, then hide parent div for this control only, if condition is false

Thank you for any advice.

EDITED TO SHOW MARKUP

Here is the rendered HTML I am working with...

<div class="square" id="myId">
<div class="content">
    <div><p id="myId2">Unavailable for Dispatch</p>
        <div class="table">
            <div class="table-cell">
                <div id="UpdatePanel1">
            <div>
        <table class="Grid" cellspacing="0" rules="all" border="1" id="DetailsView1" style="border-collapse:collapse;">
        <tr align="center">
            <td colspan="2" style="border-style:None;">Text1</td>
        </tr><tr align="center">
            <td class="building" colspan="2" style="border-style:None;">Text2</td>
        </tr><tr align="center">
            <td colspan="2" style="border-style:None;">Text3</td>
        </tr><tr align="center">
            <td class="hide" colspan="2" style="border-style:None;">Text4</td>
        </tr><tr align="center">
            <td class="hide" colspan="2">Text5</td>
        </tr>
        </table>
        </div>
                </div>
            </div>
        </div>
    </div>
</div>

I have several of these on my page. Right now I am using:

var ip = document.getElementById("DetailsView1").rows[3].cells[0].innerHTML;

But I will probably need to use a class selector on "Grid" to process them all at once, correct?

Then I need to hide the very highest div by id, not the closest parent. But ONLY hide those divs whose td 'Text 4' value is false. I am not sure how to grab the innerHTML I am currently getting from "DetailsView1", if I use the Grid class instead.

Thank you again...

Answer 1

Uses for each and then use 'this' to target individual elements.

EDIT: Had to edit this and removed includes() as it does not work in very many browsers. Now I am converting the HTML of all .Grid elements toString() and then I use indexOf() on that string to determine if it contains 10.

New working fiddle: https://jsfiddle.net/Lh5kenge/

Updated Code:

   $(function(){
          $('.Grid').each(function(){
          var string = $(this).html().toString()
          console.log(string)
            if (string.indexOf("10.") > -1) {
              $(this).closest('.square').hide()
            }
            })
            })