JavaScript startsWith 和 endsWith

Question

我有一个包含 2 个选项元素的简单表单。当用户点击“显示结果”按钮时，它将根据输入的月份和/或年份隐藏某些表格行。因此，例如，November 和 2014 是选定的选项并且单击了按钮，它应该显示字符串匹配它的行并隐藏那些不符合条件的行。我尝试过将所有 td 行与每个月的 ID 放在一起，但这是非常多余的，因为列表会增长。我还分别尝试了月份和年份的 startsWith() 和 endsWith()。

        $("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

您可以使用此代码。它实际上并没有执行 startsWith 或 endsWith，但我不明白这有什么必要:一个日期只有一年和一个月。两者之间没有混淆，所以仅仅出现“November”就意味着这是一场比赛。要求“11 月”出现在开头似乎有些矫枉过正。年也是如此。

所以，考虑到这一点，使用 jQuery 的 :contains 就可以了:

$('.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>