Support
Quality
Security
License
Reuse
kandi's functional review helps you automatically verify the functionalities of the libraries and avoid rework.
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample Here
Get all kandi verified functions for this library.
Multi-source Recommendation: For a user, recommended items are collected from different ways (popular, latest, user-based, item-based, and collaborative filtering) and ranked by click-through rate prediction.
AutoML: Choose the best recommendation model and strategy automatically by model searching in the background.
Distributed Recommendation: Single node training, distributed prediction, and ability to achieve horizontal scaling in the recommendation stage.
RESTful API: Provide RESTful APIs for data CRUD and recommendation requests.
Dashboard: Provide dashboard for data import and export, monitoring, and cluster status checking.
QUESTION
Show div if no results are found
Asked 2017-Jan-01 at 15:15I have this code. http://jsfiddle.net/n3EmN/171/ How do I show a div when some checkboxes are checked, and there is no result found, and hide that div when results are found? For example, when I check checkbox "red" and checkbox "africa", there is no result found, so now I have to show a div, how do I do that?
HTML
<div class="flowers-wrap">
<h3 style="font-size:14px; font-weight:normal;">Available Flowers</h3>
<p style="font-size:12px;"><strong>Filter flowers by colour:</strong></p>
<form>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label>
</form>
<p style="font-size:12px;"><strong>Filter flowers by size:</strong></p>
<form>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="tiny" id="tiny" /> Tiny</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="small" id="small" /> Small</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="large" id="large" /> Large</label>
<br>
<label style="font-size:12px;">
<input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label>
</form>
</div>
<div class="continents-wrap">
<h3 style="font-size:14px; font-weight:normal;">Available Continents</h3>
<div class="continents" style="font-size:12px;">
<div>Africa
<input type="checkbox" name="fl-cont" value="africa" id="africa" />
</div>
<div>Europe
<input type="checkbox" name="fl-cont" value="europe" id="europe" />
</div>
<div>Asia
<input type="checkbox" name="fl-cont" value="asia" id="asia" />
</div>
<div>North America
<input type="checkbox" name="fl-cont" value="north-america" id="north-america" />
</div>
<div>South America
<input type="checkbox" name="fl-cont" value="south-america" id="south-america" />
</div>
<div>Antarctica
<input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" />
</div>
<div>Australasia
<input type="checkbox" name="fl-cont" value="australasia" id="australasia" />
</div>
</div>
</div>
<div class="flowers">
<div class="flower" data-id="aloe" data-category="green small medium africa">Aloe</div>
<div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div>
<div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div>
<div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div>
<div class="flower" data-id="hemp" data-category="green large asia">Hemp</div>
<div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div>
<div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div>
<div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div>
<div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div>
<div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div>
<div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div>
<div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div>
<div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div>
<div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div>
</div>
CSS
body {
font-family: 'Arial';
color: #646464;
}
.continents-wrap {
float: left;
width: 20%;
margin: 0 5% 0 0;
padding: 0;
}
.flowers-wrap {
float: left;
width: 20%;
margin: 0 5% 0 0;
padding: 0;
position: relative;
}
.flowers {
float: left;
width: 50%;
}
.flowers div {
float: left;
width: 90%;
height: 68px;
line-height: 68px;
padding: 0 5%;
background: #eee;
margin: 0 0 1px;
position: relative;
}
JS
var $filterCheckboxes = $('input[type="checkbox"]');
$filterCheckboxes.on('change', function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
// create a collection containing all of the filterable elements
var $filteredResults = $('.flower');
// loop over the selected filter name -> (array) values pairs
$.each(selectedFilters, function(name, filterValues) {
// filter each .flower element
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
// loop over each category value in the current .flower's data-category
$.each(currentFilterValues, function(_, currentFilterValue) {
// if the current category exists in the selected filters array
// set matched to true, and stop looping. as we're ORing in each
// set of filters, we only need to match once
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
// if matched is true the current .flower element is returned
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
});
ANSWER
Answered 2017-Jan-01 at 15:10You can check the length attribute of the results from the jQuery selector. Since the jQuery selector finds an array of elements, you can check the length attribute of the jQuery object.
if ($filteredResults.length == 0) {
$("#divID").show();
} else {
$("#divID").hide();
}
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
No vulnerabilities reported
Save this library and start creating your kit
See Similar Libraries in
Save this library and start creating your kit
Open Weaver – Develop Applications Faster with Open Source