JavaScript startsWith和endsWith
JavaScript startsWith和endsWith
提问于 2016-08-05 01:25:23
我有一个简单的表单与2个选项的元素。当用户点击"Show Results“按钮时，它将根据输入的月份和/或年份隐藏某些表行。例如，11月和2014年是选定的选项，单击按钮时，应该会显示字符串与其匹配的行，并隐藏那些不符合条件的行。我尝试过将所有td行与每个月的I放在一起，但这是非常多余的，因为列表将会增长。我还分别针对月份和年份尝试了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>回答 2
Stack Overflow用户
发布于 2016-08-05 01:48:56
您可以使用此代码。它并不真正支持startsWith或endsWith，但我不认为这是必要的:一个日期只有一年零一个月。两者之间没有混淆，所以仅仅出现“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>
Stack Overflow用户
发布于 2016-08-05 01:51:29
$("figure.col-sm-3").each(function () {
var $months = $('table tr:nth-child(3)')
.find('td:not(:contains("November"))')
.closest('tr').hide();
});希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38773786
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号