Geek Answers Handbook

Hide the div element if the attribute does not match the filter

I am creating a simple filter function on my website.

As soon as the user selects a location from the .start-address and .end-address drop-down list and then clicks #go-button , as if I would only show a div containing <span class="waypoint"></span> , where is the user attribute waypoint matches either what is in .start-address and .end-address .

Note that I want to hide the entire waypoint-detail if a match is not found at the waypoints inside it, and not just at one waypoint.

I made fun of 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(); });
+5
source share
5 answers

You can iterate over all divs, and if their waypoint attribute is not equal to the one set in the drop-down list, then hide the parent container and exit the iteration. This code checks to see if the waypoint in the iteration matches the start or end destination, if this happens, we exit the iteration because we have a match. If this does not match, we keep going until we finish the last iteration. If we are at the last iteration and still have no match, we just 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 the fork of your JSFiddle with my answer: http://jsfiddle.net/w1ok0p6o/5/

+1
source

Here begins. Just assign the correct elements to the variable and show them.

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

Demo

Note that I first hid divs with CSS. This prevents weirdness when loading the page.

Here is an easy way to get everything. There is a way to combine these selectors, but it is slipping away from me at the moment.

Demo 2

You probably want to restructure to put your arrows in a div / show div.

+2
source

That 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(); });
+2
source

I do not really understand your user interface, 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 the <center> out of date, use css instead

Demo

+1
source

Here is one way to do it. You can get all div that do not contain a span, with the class “waypoint” and the waypoint attribute equal to one of the selected options, then apply 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/

+1
source

More articles:


All Articles