We Keep Coding

each() if number of elements are present in each div, set class remove to other div

I have a search result page. Each article there has an image, title, description and tags. I want that each article which has less than 6 tags, to add remove class from a div.
$('.searchTag-container').each(function(){
cat = $('.searchResult__tag',this).children().length;
if (cat < 6) {
console.log(cat);
$(".share").addClass("remove");
}
});
When I do this the remove class adds to all of articles even if it has 6 or more tags.
<div class="row bottom">
<div class="col-md-8">
<div class="searchResults">
<div class="searchTag-container">
<div class="searchResult__tag " data-number="0">
Tag1
</div>
<div class="searchResult__tag" data-number="1">
Tag2
</div>
<div class="searchResult__tag" data-number="2">
Tag3
</div>
<div class="searchResult__tag" data-number="3">
Tag4
</div>
<div class="searchResult__tag" data-number="4">
Tag5
</div>
<div class="searchResult__tag" data-number="5">
Tag6
</div>
</div>
</div>
</div>
<div class="col-md-4 share">
<div class="social">
<a class="btn-facebook"><img src="""></a>
<a class="btn-twitter"><img src=""></a>
<a class="btn-linkedin"><img src="""></a>
</div>
</div>

Your code is working ok, but the mistake is you are looping through .searchTag-container, which will iterate only once and you are checking .searchResult__tag's length,
so in .searchTag-container there are 6 .searchResult__tag and each one has one children, so it gives length of all .searchResult__tag's children combined so it becomes 6, and so variable cat = 6 and it gives false when you check cat < 6.
So for solving it, you have to iterate through loop of each .searchResult__tag and check it's children length as i have done,
check below for working solution of your problem:
$(function(){
$('.searchTag-container .searchResult__tag').each(function(){
cat = $(this).children().length;
if (cat < 6) {
console.log(cat);
$(".share").addClass("remove");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bottom">
<div class="col-md-8">
<div class="searchResults">
<div class="searchTag-container">
<div class="searchResult__tag " data-number="0">
Tag1
</div>
<div class="searchResult__tag" data-number="1">
Tag2
</div>
<div class="searchResult__tag" data-number="2">
Tag3
</div>
<div class="searchResult__tag" data-number="3">
Tag4
</div>
<div class="searchResult__tag" data-number="4">
Tag5
</div>
<div class="searchResult__tag" data-number="5">
Tag6
</div>
</div>
</div>
</div>
<div class="col-md-4 share">
<div class="social">
<a class="btn-facebook"><img src=""></a>
<a class="btn-twitter"><img src=""></a>
<a class="btn-linkedin"><img src="""></a>
</div>
</div>

you can try below script:
$('.searchTag-container').each(function(){
cat = parseInt($('.searchResult__tag',this).children().length);
if (cat < 6) {
$(this).closest(".row").children(".share").addClass("remove");
console.log(cat);
}
});
check this fiddle
Hope this will help you.

To select the Children with a specific class I would use $(this).children('.searchResult__tag') and get the length of that by .length as you did before

How to include different view in the same html page with framework7?

I'm a beginner with framework 7. I'm developing a little app and I split the html code in different files because i have a lot of pages with div in common. My problem is: I have a page.html, inside my page.html I'd like to include different div in the same windows from different html files.
for example in php we can do it with a
include("");
but in framework7 I can include only one with
<div class="view view-main view-init" data-url="/page/" data-name="page"></div>
I'd like to include more one view like this
<div class="view view-main view-init" data-url="/page1/" data-name="page1"></div>
<div class="view view-main view-init" data-url="/page2/" data-name="page2"></div>
i put an image here to explain me better.
what i'd like to do
Thank you for your help.
pages.html
<div data-name="pages" class="page">
<div class="page-content pg-no-padding">
<div class="row justify-content-center">
<div class="col-100 tablet-100 desktop-80">
<div class="block">
<form class="list" id="pages1">
<div class="row justify-content-center">
<div class="block-title">
<h1> Pages</h1>
</div> <!--block-title-->
</div><!--row-->
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card 1</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->
Here I'd like to include the code inside pages1.html
Here I'd like to include the code inside pages2.html
</form>
</div><!--block-->
<div class="block">
<a class="col button button-fill" href="#">Salva</a>
</div>
</div><!--col-100-->
</div><!--row-->
</div> <!-- ./ page-content-->
pages1.html
<div class="row">
<div class="col">
<div class="block-title">
<h2> Card2</h2>
</div>
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="list no-hairlines-md">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input1</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Input2</div>
<div class="item-input-wrap">
<input type="number" placeholder="" name="">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
</div><!--col-->
</div><!--row-->
</div><!--card-content-->
</div><!--card-->
</div><!--col-->
</div><!--row-->

To include Multiple Views Layout you need to do this:
You need to create wrapper with class views like this: <div class="views tabs">
You need to create div view like this: <div class="view view-main tab tab-active" id="view-1">.related page..</div><div class="view tab" id="view-2">.related page..</div>
You need to make sure thats only one views class wrapper.
In Js: You can control multiple views by this:
var view1 = app.views.create('#view-1', {...});
var view2 = app.views.create('#view-2', {...});
For more details: F7 View
For Embedded Multi view not like tab:
Example
Note: for each view in F7 is got 100% height...you need to make sure thats height is equal 100% finally

EDIT: After a long investigation, I found from the documentation that you can do it like this:
<!-- in your views page, just add these parameter to your view you want to inherit -->
<div class="view view-init" data-url="/your-page/" data-name="home" data-push-state="true">
...
</div>
And in your routers, will need to define your route as well:
var app = new Framework7({
root: '#app',
// Create routes for all pages
routes: [
{
path: '/',
url: 'index.html',
},{
// Add your contents page route
path: '/your-page/',
url: 'pages/your-page.html',
},
.....
});
Hope this help.

List.js finds the element but still keeps others too

its my first time using List.js. I have the following structure:
var options = {
valueNames: ['name']
};
var coursesList = new List('courses-list', options);
coursesList.on('updated', function(list) {
console.info(list.matchingItems);
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
<input class="search">
<div id="collectionView" class="list">
<div class="row1">
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Demokurs Französisch A2 Online</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Französisch</span>
<p class="description">blabla</p>
</a>
</div>
</div>
<div class="row2">
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs A</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns" >
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs B<span>
<p class="description">blabla</p>
</a>
</div>
</div>
</div>
</div>
Well now if I search for the term A2 it show correctly the content of the firstdiv in row1 BUT also the second div with all of its content. List.js hides row2 as wished.
How can I make it work that it also hides all other divs in a row?
I have also checked if really only matching is there with:
coursesList.on('updated', function(list) {
console.info(list.matchingItems);
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
})
The logs show that list.matchingItems finds only object.

List.js isn't designed to work this way, it doesn't support nested lists, it only counts a list item down 1 level, so its sees the whole of the <div class="row1"> as a single list item and <div class="row2"> as another.
If you want it to work properly I suggest removing the <div class="row1"> and<div class="row2"> so that all the relevant <div> are at the same level. Like shown below:
var options = {
valueNames: ['name']
};
var coursesList = new List('courses-list', options);
coursesList.on('updated', function(list) {
console.info(list.matchingItems);
if (list.matchingItems.length > 0) {
$('.no-result').hide()
} else {
$('.no-result').show()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div id="courses-list">
<input class="search">
<div id="collectionView" class="list">
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Demokurs Französisch A2 Online</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Französisch</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs A</span>
<p class="description">blabla</p>
</a>
</div>
<div class="large-6 small-12 columns">
<a href="link/to/somewhere" target="_blank">
<span class="name">Kurs B</span>
<p class="description">blabla</p>
</a>
</div>
</div>
</div>
If you absolutely require the nested lists then you should instead use jQuery, in a similar way to this question and not use List.js.

Manage complex select/deselect artis/album/song

First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks

Changing pictures by clicking on a text

I have a text on a list
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
and I have a <div> for the pictures and the labels
<div class="show">
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">LION</div>
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">TIGER</div>
<div class="pic"><img src="LION.jpg"></pic>
<div class="labels">CHEETAH</div>
</div>
what I was intending to do is when I click on the word LION the <div> will show the picture of the lion and its label and then, when clicked on the tiger the lion pic and label will be hidden and the tiger will be shown...any javascript or jquery command for this?
I'm sorry I just not very good at this.

Yet another solution :)
Js Fiddler Demo here
HTML
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="pic" data-name="lion"><img src="http://rs183.pbsrc.com/albums/x46/rebelrhoads/Lion.jpg~c200"/></div>
<div class="labels" data-name="lion">LION</div>
<div class="pic" data-name="tiger"><img src="http://www.perthzoo.wa.gov.au/wp-content/uploads/2011/06/Sumatran-Tiger.jpg"/></div>
<div class="labels" data-name="tiger">TIGER</div>
<div class="pic" data-name="cheetah"><img src="http://blog.londolozi.com/wp-content/uploads/2013/11/thumb-cheetah.jpg"/></div>
<div class="labels" data-name="cheetah">CHEETAH</div>
</div>
CSS
li{
color:#999;
cursor:pointer;
}
li.selected{
color:#000;
}
li:hover{
color:#000;
}
div.pic, div.labels{
display:none;
}
JavaScript
$(function(){
$('li').click(showAnimal);
});
function showAnimal(){
$('li').removeClass('selected');
$(this).addClass('selected');
var animal = $(this).text();
if(animal.toString().toLowerCase() == "animals")
$('div[data-name]').show();
else{
$('div.pic').hide();
$('div.labels').hide();
$('div[data-name=' + animal.toString().toLowerCase() + ']').show();
}
}

This is my idea:
html
<div class="show">
<div class="pic lion"><img src="LION.jpg"></pic>
<div class="labels lion">LION</div>
<div class="pic tiger"><img src="LION.jpg"></pic>
<div class="labels tiger">TIGER</div>
<div class="pic cheetah"><img src="LION.jpg"></pic>
<div class="labels cheetah">CHEETAH</div>
</div>
javascript
$(function(){
$('.animalss').click(function(){
switch($(this).text()){
case 'LION':
$('.pic').not('.lion').hide();
$('.labels').not('.lion').hide();
$('.lion').show();
break;
case 'TIGER':
$('.pic').not('.tiger').hide();
$('.labels').not('.tiger').hide();
$('.tiger').show();
break;
case 'CHEETAH':
$('.pic').not('.cheetah').hide();
$('.labels').not('.cheetah').hide();
$('.cheetah').show();
break;
}
});
});

Try this
HTML
<label>ANIMALS</label>
<ul class="1">
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="lion" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">LION</div>
</div>
<div class="tiger" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">TIGER</div>
</div>
<div class="cheetah" style="display:none">
<div class="pic"><img src="LION.jpg"></div>
<div class="labels">CHEETAH</div>
</div>
</div>
Jquery Script
$('ul li').on('click',function(){
var text=$(this).text().toLowerCase();
$('.'+text).show('slow').siblings().hide();
});
DEMO

//check the solution on fiddle DEMO
http://jsfiddle.net/5Ks5n/
html
<ul class="animal-list">
<li class="liHEADER" data-view="lion">Lion</li>
<li class="animalss" data-view="tiger">Tiger</li>
</ul>
<div class="show">
<div class="pic" style="display:none" data-animal="lion">
<img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" />
<div class="labels">LION</div>
</div>
<div class="pic" style="display:none" data-animal="tiger">
<img src="http://3.bp.blogspot.com/-OiigZsVwwNQ/UFM5KDugeiI/AAAAAAAAJ_Y/HrPEPFnSXCI/s1600/Male+Lion+Wallpapers+1.jpg" />
<div class="labels">TIGER</div>
</div>
</div>
Javascript
$(document).on("click",".animal-list",function(element){
var $target = $(element.target);
var animal = $target.attr("data-view");
$(".pic").hide();
$("[data-animal='"+ animal +"']").show();
});

Simple approach:
<label>ANIMALS</label>
<ul class="1">
<li class="animalss">LION</li>
<li class="animalss">TIGER</li>
<li class="animalss">CHEETAH</li>
</ul>
<div class="show">
<div class="lion_pic" style="display:none">
<img src="LION.jpg"></pic>
<label>LION</label>
</div>
<div class="tiger_pic" style="display:none">
<img src="TIGER.jpg"></pic>
<label>TIGER</label>
</div>
<div class="cheetah_pic" style="display:none">
<img src="CHEETAH.jpg"></pic>
<label>CHEETAH</label>
</div>
</div>
JS Code:
$('ul.1').click(function(e){
var type = $(e.target).text();
if(type === 'LION'){
$('.lion_pic').show();
$('.tiger_pic').hide();
$('.cheetah_pic').hide();
} else if(type === 'TIGER'){
$('.tiger_pic').show();
$('.lion_pic').hide()
$('.cheetah_pic').hide()
} else {
$('.cheetah_pic').show();
$('.lion_pic').hide()
$('.tiger_pic').hide()
}
});

The easiest but not shortest way to do this to assign classes to a group, group mean elements wich are interact with each oter i.e. lion text, image and lable in your case. Then use this code:
<pre>
<style>
.show div{display:none;}
</style>
<ul class="1">
<li class="liHEADER">ANIMALS</li>
<li class="animalss" id = "lion" onclick="showImage(this.id);">LION</li>
<li class="animalss" id = "tiger" onclick="showImage(this.id);">TIGER</li>
<li class="animalss" id="cheetah" onclick="showImage(this.id);">CHEETAH</li>
</ul>
<div class="show">
<div class="pic lion"><img src="LION.jpg"></pic>
<div class="labels lion">LION</div>
<div class="pic tiger"><img src="LION.jpg"></pic>
<div class="labels tiger">TIGER</div>
<div class="pic cheetah"><img src="LION.jpg"></pic>
<div class="labels cheetah">CHEETAH</div>
</div>
</pre>
Then jQuery will be
<pre>
<script>
function showImage(param){
var classToShow = param;
$('.'+param).show();
$('.show div:not("."'+param+'")').hide();
}
</script>
</pre>
Check for syntex error and let me know about it.

I have reformatted your HTML so that its much easier to illustrate since I think maybe you are able to change the HTML of your site. This is perhaps how most people write code for Tabs.
<ul>
<li class="animals">LION</li>
<li class="animals">TIGER</li>
</ul>
<div class="content">
<div class="pic" id="lion">
<img src="LION.jpg" />
<div class="labels">LION</div>
</div>
<div class="pic" id="tiger">
<img src="TIGER.jpg" />
<div class="labels">TIGER</div>
</div>
</div>
and here is the jQuery code,
$(".pic").hide();
$("a[href='#lion']").on('click', function() {
$(".pic").hide();
$("#lion").show();
});
$("a[href='#tiger']").on('click', function() {
$(".pic").hide();
$("#tiger").show();
});
everytime we reload the page, we make sure the are hidden using $(".pic").hide(). Then when the user clicks LION or TIGER links, we will hide both and then show only the correct div, which is either LION or TIGER. Here is a Working Example. It is certainly possible to make the code even shorter by abstracting LION and TIGER to ANIMALS (or well, anything you want), but then it will be harder to understand for beginners.