如果开始地址或结束地址与任何航点匹配，则隐藏父 div

Question

我目前正在遍历我所有的div，以检查它们的航点属性是否等于在as startAddress和destinationAddress中设置的属性。

如果div中的所有航点项目都不匹配，我想隐藏父容器（rideshare-item）并继续。但如果有匹配，我不想隐藏它。

我该怎么做？我目前正在迭代所有div，但我不确定如何隐藏和取消隐藏内容。

JavaScript

$('body').on('click', '#go-button', function(event){
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.destination-address').val();
    // Only show matching pickup address and waypoint
    $('.rideshare-item').show();
    $('.rideshare-item .rideshare-detail .waypoint').each(function(a,b){
        var waypoint = $(b).data('waypoint');
        if((waypoint == startAddress) || (waypoint == destinationAddress)){
            // do not hide div element
        }
        else if($((waypoint != startAddress) && (waypoint != destinationAddress)) 
                && a == $('.rideshare-detail .waypoint').length-1) {
            // hide div element 
        }
    });

.HTML

<div class="row rideshare-item">
    <div class="col-md-2"></div>
    <div class="col-md-7">
        <div class="panel panel-default rideshare-detail" style="display: none;">
            <div class="panel-body"> <strong>Waypoints</strong>
                <br>
                <br> <span style="color:#449D44">Start</span>
                <br> <span class="waypoint" data-waypoint="Hall">Hall</span>
                <br> <span class="waypoint" data-waypoint="Apartments">Apartments</span>
                <br> <span class="waypoint" data-waypoint="Train Station">Train Station</span>
                <br> <span style="color:#c12e2a">Stop</span>
            </div>
            <br>
        </div>
    </div>
</div>
<div class="row rideshare-item">
    <div class="col-md-2"></div>
    <div class="col-md-7">
        <div class="panel panel-default rideshare-detail" style="display: none;">
            <div class="panel-body"> <strong>Waypoints</strong>
                <br>
                <br> <span style="color:#449D44">Start</span>
                <br> <span class="waypoint" data-waypoint="Lab">Lab</span>
                <br> <span class="waypoint" data-waypoint="Park">Park</span>
                <br> <span style="color:#c12e2a">Stop</span>
            </div>
            <br>
        </div>
    </div>
</div>

Answer 1

您可以使用

.closest('.rideshare-item')来获取具有rideshare-item类的父元素

 $('.rideshare-item .rideshare-detail .waypoint').each(function(a,b){
    var waypoint = $(b).data('waypoint');
    if((waypoint == startAddress) || (waypoint == destinationAddress)){
        // do not hide div element
    }
    else if($((waypoint != startAddress) && (waypoint != destinationAddress)) 
            && a == $('.rideshare-detail .waypoint').length-1) {
            $(this).closest('.rideshare-item').hide();
    }
});

Answer 2

使用 jQuery 有很多隐藏方法：

$('element').hide();
$('element').fadeOut();
$('element').slideToggle();
$('element').css('display', 'none');
$('element').css('visibility', 'hidden');

收件人：其他用户 -

如果有其他方法，请用它们更新我的答案。