JavaScript startsWith和endsWith

Question

I have a simple form with 2 option elements. When the user hits the "Show Results" button, it will hide the certain table rows based on the month and/or year that was inputted. So for example, November and 2014 were the selected options and the button was clicked, it should show rows whose string matches it and hides those that didn't fit the criteria. I tried something like putting all td rows with ids of each month but that is very redundant because the list would grow. I also tried startsWith() and endsWith() for month and year, respectively.

        $("figure.col-sm-3").each(function () {
            var getMonth = document.getElementById('table').getElementsByTagName('tr')[3].getElementsByTagName('td').startsWith("November");
            $("figure.col-sm-3").hide;
            $(getMonth).show;
            )
        });

<section class="container">
    <div class="row">
    <!-- FORM AREA -->
        <p>Show items by:</p>
        <form class="form-horizontal">
            <div class="form-group">
            <label for="inputMonth" class="col-sm-2 control-label">Select Month</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputMonth">
                        <option value="none"> - </option>
                        <option value="January">January</option>
                        <option value="February">February</option>
                        <option value="March">March</option>
                        <option value="April">April</option>
                        <option value="May">May</option>
                        <option value="June">June</option>
                        <option value="July">July</option>
                        <option value="August">August</option>
                        <option value="September">September</option>
                        <option value="October">October</option>
                        <option value="November">November</option>
                        <option value="December">December</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label for="inputYear" class="col-sm-2 control-label">Select Year</label>
                <div class="col-sm-10">
                    <select class="form-control" id="inputYear">
                        <option value="2014">2014</option>
                        <option value="2015">2015</option>
                        <option value="2016">2016</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-primary">Show results</button>
                </div>
            </div>
        </form>
    </div>
</section>

<section class="container">
    <div class="row"> <!-- FIRST SET OF ITEMS -->
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 1</h6>
            <img src="img1.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>November 7, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 2</h6>
            <img src="img2.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>36</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>December 2, 2014</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase"Item 3</h6>
            <img src="img3.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>L</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
        <figure class="col-sm-3 thumbnail">
            <h6 class="text-center text-uppercase">Item 4</h6>
            <img src="img4.jpg" />
                <table class="table">
                    <tr class="price">
                        <td>Price</td>
                        <td>250</td>
                    </tr>
                    <tr>
                        <td>Condition</td>
                        <td>new</td>
                    </tr>
                    <tr>
                        <td>Size</td>
                        <td>XL</td>
                    </tr>
                    <tr>
                        <td>Sold on</td>
                        <td>February 19, 2015</td>
                    </tr>
                </table>
        </figure>
    </div>
</section>

Answer 1

You could use this code. It does not really do startsWith or endsWith , but I don't see how that is necessary: a date will only have one year in it, and one month. There is no confusion between the two, so just the mere presence of "November" means it is a match. Requiring that "November" appears at the start seems overkill. The same goes for the year.

So, with that in mind, using jQuery's :contains will do it:

$('.btn-primary').click(function() {
    var month = $('#inputMonth').val();
    if (month == 'none') month = '';
    var year = $('#inputYear').val();
    $('div.row').show(); // show all "rows"
    $('figure.col-sm-3')
        .hide() // hide all of them, and then show if both `has` are true
        .has('tr:last-child>td:last-child:contains(' + year + ')')
        .has('tr:last-child>td:last-child:contains(' + month + ')')
        .show();
    // hide any rows that have no more visible figures
    $('div.row:has(figure):not(:has(figure:visible))').hide();
    return false; // to avoid that button submits the form
});

 $('.btn-primary').click(function() { var month = $('#inputMonth').val(); if (month == 'none') month = ''; var year = $('#inputYear').val(); $('div.row').show(); // show all "rows" $('figure.col-sm-3') .hide() // hide all of them, and then show if both `has` are true .has('tr:last-child>td:last-child:contains(' + year + ')') .has('tr:last-child>td:last-child:contains(' + month + ')') .show(); // hide any rows that have no more visible figures $('div.row:has(figure):not(:has(figure:visible))').hide(); return false; // to avoid that button submits the form }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <div class="row"> <!-- FORM AREA --> <p>Show items by:</p> <form class="form-horizontal"> <div class="form-group"> <label for="inputMonth" class="col-sm-2 control-label">Select Month</label> <div class="col-sm-10"> <select class="form-control" id="inputMonth"> <option value="none"> - </option> <option value="January">January</option> <option value="February">February</option> <option value="March">March</option> <option value="April">April</option> <option value="May">May</option> <option value="June">June</option> <option value="July">July</option> <option value="August">August</option> <option value="September">September</option> <option value="October">October</option> <option value="November">November</option> <option value="December">December</option> </select> </div> </div> <div class="form-group"> <label for="inputYear" class="col-sm-2 control-label">Select Year</label> <div class="col-sm-10"> <select class="form-control" id="inputYear"> <option value="2014">2014</option> <option value="2015">2015</option> <option value="2016">2016</option> </select> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button class="btn btn-primary">Show results</button> </div> </div> </form> </div> </section> <section class="container"> <div class="row"> <!-- FIRST SET OF ITEMS --> <figure class="col-sm-3 thumbnail"> <h6 class="text-center text-uppercase">Item 1</h6> <img src="img1.jpg" /> <table class="table"> <tr class="price"> <td>Price</td> <td>250</td> </tr> <tr> <td>Condition</td> <td>new</td> </tr> <tr> <td>Size</td> <td>36</td> </tr> <tr> <td>Sold on</td> <td>November 7, 2014</td> </tr> </table> </figure> <figure class="col-sm-3 thumbnail"> <h6 class="text-center text-uppercase">Item 2</h6> <img src="img2.jpg" /> <table class="table"> <tr class="price"> <td>Price</td> <td>250</td> </tr> <tr> <td>Condition</td> <td>new</td> </tr> <tr> <td>Size</td> <td>36</td> </tr> <tr> <td>Sold on</td> <td>December 2, 2014</td> </tr> </table> </figure> <figure class="col-sm-3 thumbnail"> <h6 class="text-center text-uppercase"Item 3</h6> <img src="img3.jpg" /> <table class="table"> <tr class="price"> <td>Price</td> <td>250</td> </tr> <tr> <td>Condition</td> <td>new</td> </tr> <tr> <td>Size</td> <td>L</td> </tr> <tr> <td>Sold on</td> <td>February 19, 2015</td> </tr> </table> </figure> <figure class="col-sm-3 thumbnail"> <h6 class="text-center text-uppercase">Item 4</h6> <img src="img4.jpg" /> <table class="table"> <tr class="price"> <td>Price</td> <td>250</td> </tr> <tr> <td>Condition</td> <td>new</td> </tr> <tr> <td>Size</td> <td>XL</td> </tr> <tr> <td>Sold on</td> <td>February 19, 2015</td> </tr> </table> </figure> </div> </section> 

Answer 2

$("figure.col-sm-3").each(function () {
  var $months = $('table tr:nth-child(3)')
                .find('td:not(:contains("November"))')
                .closest('tr').hide();
 });

Hope that helps!