Applying CSS based on text

HTML

<button id="btnHide">Hide post divs</button> <button id="btnRunScript">Run script code</button>
<div class="main">
    <div class="someExtraLayers">
        <div class="page"> 1 </div>
    </div>
    <div class="someOtherLayers">
        <div class="post">A blah blah</div>
        <div class="post">B foo foo</div>
        <div class="post">C bar bar</div>
    </div>
</div>
<div class="main">
    <div class="someExtraLayers">
        <div class="page"> 2 </div>
    </div>
    <div class="someOtherLayers">
        <div class="post">A blah blah</div>
        <div class="post">B foo foo</div>
        <div class="post">C bar bar</div>
    </div>
</div>
<div class="main">
    <div class="someExtraLayers">
        <div class="page"> 11 </div>
    </div>
    <div class="someOtherLayers">
        <div class="post">A blah blah</div>
        <div class="post">B foo foo</div>
        <div class="post">C bar bar</div>
    </div>
</div>

CSS

div {
    margin: 0.5ex;
    padding: 0.5ex 1ex;
    border: 1px dashed lime;
    width: 70%;
}
div.page {
    background: #d0f0ff;
}

JavaScript

$("#btnRunScript").click ( function () {
    var pageHasOne  = $("div.main:has(div.page:contains(1))");
    pageHasOne.each ( function () {
        var jThis   = $(this);  //-- this is a special var inside an .each()
        var pageDiv = jThis.find ("div.page:contains(1)");
        if ($.trim (pageDiv.text() )  == "1") {
            //--- Show the first post div. !important is not needed here.
            jThis.find ("div.post:first").css ("display", "block");
        }
    } );
} );

$("#btnHide").click ( function () {
    $("div.post").hide ();
} );