javascript - CSS/JQuery |过滤元素时，最后一个元素的一部分不会消失

Question

在我的 HTML 页面上，我有一个正在过滤的元素列表(参见图片):

问题是，当我搜索某个值时(如下图所示)，最后一个 button 的 div 不会消失。

它是最后一个元素(本例中列表中的最后一辆汽车)的 div。因此，与最后一辆车的链接消失了，但带有按钮的 div 仍保留在那里。当我搜索最后一辆车时，一切正常。在这里，我通过代码片段附加了我的代码(仅包含必要的 CSS):

//Filtering
$(document).ready(function(){
    $("#searchBuilding").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".buildings a,.rooms a").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

.around_link_div {
    position: relative;
}

.button_today_div{
    position: absolute;
    right: 0;
    top: 5px;
    z-index: 1;
}

.button_today_div button{
    background-color: #2b542c;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
	<div class="row">
		<div class="col-sm-offset-2 col-sm-8">
			<input class="form-control" id="searchBuilding" type="text" placeholder="Search...">
		</div>
	</div>

		<div id="building" class="list-group text-center col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 buildings">
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Porsche</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Audi</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">BMW</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Traktor</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Mercedes</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Volvo</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Volkswagen</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Chevrolet</a>
			</div>
			<div class="around_link_div">
				<div class="button_today_div"><button onclick="location.href='today.html'" class="btn btn-primary btn-sm">INFO</button></div>
				<a href="rooms.html" class="list-group-item hoverable">Opel</a>
			</div>
		</div>

</div>

请原谅我知识匮乏(还在学习，前端不是我的强项)。

感谢您的回复。

Answer 1

您的过滤选择器 ($(".buildings a,.rooms a")) 仅选择 anchor (

$(document).ready(function(){
    $("#searchBuilding").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $(".buildings .around_link_div,.rooms a").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});

此外，在您发布的代码中，“.rooms a”是多余的。