CODEWITHSUNDEEP
jquery
methuselah
methuselah

Reputation: 13206

$(this).closest not working after div iteration

I am having the following problem:

When iterating through all of my divs to check if their waypoint attribute is equal to the one set in the as startAddress and destinationAddress, ff there is no match out of all the waypoint items in the div, I want to hide the parent container (rideshare-item) and carry on. But if there is a match, I do not want to hide it.

Using $(this).closest('.rideshare-item').hide(); doesn't seem to be working. Is there something wrong with my code?

Jsfiddle here.

HTML

<div class="row">
    <div class="col-md-4">Start:
        <br>
        <select class="form-control start-address">
            <option value="Lab">Lab</option>
            <option value="Hall">Hall</option>
            <option value="Apartments">Apartments</option>
            <option value="Church">Church</option>
            <option value="Park">Park</option>
            <option value="College">College</option>
        </select>
    </div>
    <br>
    <div class="col-md-4">Destination:
        <br>
        <select class="form-control end-address">
            <option value="Lab">Lab</option>
            <option value="Hall">Hall</option>
            <option value="Apartments">Apartments</option>
            <option value="Church">Church</option>
            <option value="Park">Park</option>
            <option value="College">College</option>
        </select>
    </div>
    <br>
    <div class="col-md-4">
        <button type="button" class="btn btn-success" id="go-button">Go</button>
    </div>
</div>
<br><br>
<div class="row rideshare-item">
    <div class="col-md-7">
        <div class="panel panel-default rideshare-detail">
            <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>
        </div>
    </div>
</div>
<div class="row rideshare-item">
    <div class="col-md-7">
        <div class="panel panel-default rideshare-detail">
            <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>
        </div>
    </div>
</div>

JS

$('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 
            $(this).closest('.rideshare-item').hide();
        }
    });
}

Upvotes: 0

Views: 142

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

  • Your JSFiddle is broken (missing a closing );)
  • You also create a dummy jQuery object and test for true (which will always match) $((waypoint != startAddress) && (waypoint != destinationAddress))

I also reversed your logic (hide first and show on match) to simplify it:

$('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').hide();
    $('.rideshare-item .rideshare-detail .waypoint').each(function (a, b) {
        var waypoint = $(b).data('waypoint');
        if (waypoint == startAddress || waypoint == destinationAddress) {
            // show div element 
            $(this).closest('.rideshare-item').show();
        }
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/e3kg160g/6/

Upvotes: 1

Related Questions