Hide div element if attribute does not match filter

Question

I am building a simple filter feature onto my website.

Once the user selects a location from the .start-address and .end-address dropdown, and then presses #go-button, how would I only show the div's which contain a <span class="waypoint"></span> wherein the custom attribute waypoint matches either what is in .start-address and .end-address.

Please note that I want to hide the entire waypoint-detail if a match is not found in the waypoints within it, not just a single waypoint.

I have mocked up a quick jsFiddle to show this: http://jsfiddle.net/tLhdndgx/3/.

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>
<div class="panel panel-default waypoint-detail" style="display: block;">
    <div class="panel-body">
        <strong>Waypoint Set 1</strong>
        <br>
        <br>
        <center>
            <span style="color:#449D44">Start</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Hall">Hall</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Apartments">Apartments</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Church">Church</span>
            <br>↓<br>
        </center>
        <center><span style="color:#c12e2a">Stop</span></center>
    </div>
</div>
<div class="panel panel-default rideshare-detail" style="display: block;">
    <div class="panel-body">
        <strong>Waypoint Set 2</strong>
        <br>
        <br>
        <center>
            <span style="color:#449D44">Start</span>
            <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="Hall">Park</span>
                <br>↓<br>
        </center>
        <center>
            <span class="waypoint" waypoint="College">College</span>
            <br>↓<br>
        </center>
        <center><span style="color:#c12e2a">Stop</span></center>
    </div>
</div>

JavaScript

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.destination-address').val();
});

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Here's a start. Simply assign the right elements to a variable and show those.

$('body').on('click', '#go-button', function (event) {
    ...
    var myDivs = $('.waypoint[waypoint=' + startAddress + ']');

    myDivs.show();
});

Demo

Notice that I've hidden the divs initially with CSS. This prevents weirdness at page load.

Here's a simplistic way to get it all. There's a way to combine those selectors, but it escapes me at the moment.

Demo 2

You'll probably want to restructure to put your arrows inside the hide/show divs.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 30, 2015 at 18:22

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jack · Accepted Answer · 2015-04-30 18:43:06Z

2

This should do it. http://jsfiddle.net/tLhdndgx/10/

var waypoints = $('.waypoint'),
    details = $('.waypoint-detail');

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    details.hide();
    waypoints.filter(function(){
        var self = $(this),
            waypoint = self.attr('waypoint');
        return (waypoint == startAddress || waypoint == destinationAddress);
    }).parent(details).show();
});

edited Apr 30, 2015 at 18:43

answered Apr 30, 2015 at 18:30

Jack

8,9413 gold badges23 silver badges27 bronze badges

1 Comment

methuselah Over a year ago

Sorry - I think there is some confusion. I want to hide the entire .waypoint-detail if a match is not found amongst the waypoints. Not a single waypoint.

Mike Hamilton · Accepted Answer · 2015-04-30 20:25:50Z

1

You can iterate through all of the divs and if their waypoint attribute is not equal to the one set in the dropdown then hide the parent container and exit the iteration. This code checks to see if the waypoint we are at in the iteration matches the start or end destination, if it does then we exit the iteration because we have a match. If it doesn't match, we keep going until we are on the last iteration. If we are on the last iteration and still don't have a match, we simply hide the parent container.

$('#go-button').click(function() {
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    function checkWaypoints(container){
        $(container).show();
        $(container+' .waypoint').each(function(a,b){
            var waypoint = $(b).attr('waypoint');
                   console.log(waypoint);
                if((waypoint == startAddress) || (waypoint == destinationAddress)){
                    return false;  
                }
                else if($((waypoint != startAddress) && (waypoint != destinationAddress)) && a == $(container+' .waypoint').length-1) {
                    $(this).closest(container).hide();
                }

         });
    }

    checkWaypoints('.waypoint-detail');
    checkWaypoints('.rideshare-detail');

});

Here is a fork of your JSFiddle with my answer: http://jsfiddle.net/w1ok0p6o/5/

edited Apr 30, 2015 at 20:25

answered Apr 30, 2015 at 18:37

Mike Hamilton

1,5651 gold badge16 silver badges24 bronze badges

8 Comments

charlietfl Over a year ago

what if user makes changes, need to unhide if they match?

methuselah Over a year ago

Sorry - I think there is some confusion. I want to hide the entire .waypoint-detail if a match is not found amongst the waypoints. Not a single waypoint.

Mike Hamilton Over a year ago

@charlietfl, good point. I added $('.waypoint').show() before iterating over the waypoints as a way of "resetting" the hidden ones

Mike Hamilton Over a year ago

@methuselah, okay I have an idea, let me update my answer. You should wrap the way point set in a container that you can hide if you need to.

Mike Hamilton Over a year ago

@methuselah i've updated my answer and added a jsfiddle

|

charlietfl · Accepted Answer · 2015-04-30 18:32:20Z

1

I don't really understand your UI but you can use filter()

var $waypoints = $('.waypoint').parent()

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();
    // check for at least one value
    if (startAddress || destinationAddress) {
        // hide all then filter the ones that match to show
        $waypoints.hide().filter(function () {
            var waypointVal = $(this).find('.waypoint').attr('waypoint');
            return waypointVal == startAddress || waypointVal == destinationAddress
        }).show()
    } else {
        //otherwise show all
        $waypoints.show();
    }

});

Note that <center> tag is deprecated, use css instead

DEMO

edited Apr 30, 2015 at 18:32

answered Apr 30, 2015 at 18:29

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

Jack Over a year ago

I second that UI comment. Wasn't sure if he wanted the arrow hidden or not.

methuselah Over a year ago

Sorry - I think there is some confusion. I want to hide the entire .waypoint-detail if a match is not found amongst the waypoints. Not a single waypoint.

Spencer · Accepted Answer · 2015-04-30 19:03:47Z

1

Here is one way to do it. You can get all of the div that don't contain a span with the class of "waypoint" and waypoint attribute equal to one of the selected options, then apply the jquery hide().

$('body').on('click', '#go-button', function (event) {
    // Collect values
    var startAddress = $('.start-address').val();
    var destinationAddress = $('.end-address').val();

    $('div').filter(function (index) {
        return $(this)
            .find("span.waypoint[waypoint=" + startAddress + "], span.waypoint[waypoint=" + destinationAddress + "]")
            .length == 0;
    }).hide();
});

jsfiddle: http://jsfiddle.net/4rvz09mu/

edited Apr 30, 2015 at 19:03

answered Apr 30, 2015 at 18:45

Spencer

1162 gold badges2 silver badges9 bronze badges

2 Comments

Jack Over a year ago

That filter is going to look at every div on the page.

Spencer Over a year ago

@Jack The poster asked to only show the divs that contain the waypoints. If you only want to hide the waypoint-detail divs, change ($'div') in my code to $('.waypoint-detail')

Collectives™ on Stack Overflow

Hide div element if attribute does not match filter

5 Answers 5

Comments

1 Comment

8 Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

8 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related