I'm using this category filter that exactly matches data attribute product-collection__categoryof the items and the selectors. But I want it a partial or lazy match only. For example, if the selector contains "cats", it will still include items that have "cat","category" etc. I have tried if (categories[i] *= cat) but it's wrong.
Fiddle
HTML
<div class="product-collection">
<ul>
<li class="product-collection__selector
product-collection__selector--active"
data-product-collection__category="">All</li>
<li class="product-collection__selector"
data-product-collection__category="cat1">Category 1</li>
<li class="product-collection__selector"
data-product-collection__category="cat2">Category 2</li>
</ul>
<ul>
<li class="product-collection__item"
data-product-collection__category="cat1">Item 1 [cat 1]</li>
<li class="product-collection__item"
data-product-collection__category="cat2">Item 2 [cat 2]</li>
<li class="product-collection__item"
data-product-collection__category="cat1 cat2">Item 3 [cat 1, cat 2]</li>
</ul>
</div>
Code
$(function() {
$('.product-collection').each(function() {
var $collection = $(this);
var $selectors = $collection.find('.product-collection__selector,.filterselect__selector');
var $items = $collection.find('.product-collection__item');
$selectors.click(function() {
var $selector = $(this);
var cat = $selector.data('product-collection__category');
$selectors.change(function() {
var $selector = $(this);
var cat = $selector.find('option:selected').data('product-collection__category');
$selectors.removeClass('filterselect__selector--active');
$selector.addClass('filterselect__selector--active'); });
if (cat) {
var containsCategory = function(data) {
var categories = data.split(/\s+/);
for (var i = 0; i < categories.length; i++)
if (categories[i] == cat)
return true;
return false;
};
}
else {
$items.fadeIn();
}
});
});
});
I simplified the fiddle so that you could see the selector and test in action - http://jsfiddle.net/cYFLe/64/
$('li').each(function() {
// test the data attribute for partial
if( $(this).is('[data-product-collection__category*="cat"]') ) {
console.log( $(this).text() );
}
});
http://api.jquery.com/is/ is the difference here, it allows the test of the category for truthiness.
Related
I want to pass(return) data-filter value and children text , I am able to pass the data-filter value but I am unable to pass the children text. My HTML and JQuery as following:
$(document).ready(function() {
$('.sidebar-filter').on('click', function() {
var filterobj = {};
$(".sidebar-filter").each(function(index, ele) {
var filterval = $(this).children('a').text();
var filterkey = $(this).data('filter');
filterobj[filterkey] = Array.from(document.querySelectorAll('li[data-filter=' + filterkey + '].active')).map(function(el) {
return ele.value;
});
});
console.log(filterobj);
});
});
<ul>
<li class="sidebar-filter " data-filter="category" data-value="1">
Item Name
</li>
</ul>
My return will be like:
category: Array [ undefined ]
I want value inside the array instead of undefined.
Your lis don't have attribute value, actually you want to read attribute data-value, you can achieve your goal by converting return ele.value; to return el.getAttribute('data-value');
$(document).ready(function() {
$('.sidebar-filter').on('click', function() {
var filterobj = {};
$(".sidebar-filter").each(function(index, ele) {
var filterval = $(this).children('a').text();
var filterkey = $(this).data('filter');
filterobj[filterkey] = Array.from(document.querySelectorAll('li[data-filter=' + filterkey + '].active')).map(function(el) {
return el.getAttribute("data-value");
});
});
console.log(filterobj);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul>
<li class="sidebar-filter active" data-filter="category" data-value="1">
Item Name
</li>
</ul>
Posting answer, might be of help to someone others too
filterobj[filterkey]= Array.from(document.querySelectorAll
('li[data-filter=' + filterkey+'].active')).map(function(el){
return $(el).data("value")
});
I am using angularjs I have two list when I click first one I will push the value into another scope and bind the value to second list. Now my requirement is when first list values which are moved to second list, I need to change the color of moved values in list1
Here I attached my fiddle
Fiddle
You can use findIndex and ng-class together to check if the second list contains the same item as first. If present apply css class to the first list item.
JS:
$scope.checkColor = function(text) {
var index = $scope.linesTwos.findIndex(x => x.text === text);
if (index > -1) return true;
else return false;
}
HTML:
<li ng-click="Team($index,line.text)" ng-class="{'change-color':checkColor(line.text)}">{{line.text}}</li>
Working Demo: https://jsfiddle.net/7MhLd/2659/
You can do something like this:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.lines = [{
text: 'res1'
},
{
text: 'res2'
},
{
text: 'res3'
}
];
$scope.linesTwos = [];
$scope.Team = function(index, text) {
var obj = {};
obj.text = text;
$scope.linesTwos.push(obj)
}
$scope.Team2 = function(index, text2) {
$scope.linesTwos.splice(index, 1)
}
$scope.containsObj = function(obj, list) {
var i;
for (i = 0; i < list.length; i++) {
if (angular.equals(list[i], obj)) {
return true;
}
}
return false;
};
}
.clicked {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul ng-repeat="line in lines">
<li ng-class="{'clicked': containsObj(line,linesTwos)}" ng-click="Team($index,line.text)">{{line.text}}</li>
</ul>
<ul>
<li>__________</li>
</ul>
<ul ng-repeat="line in linesTwos">
<li ng-click="Team2($index,line.text)">{{line.text}}</li>
</ul>
</div>
you have to achieve it using ng-class and create a dynamic class style for pushed data please check my working example fiddle
JS fiddle sample
in HTML nedd to do these changes
<li ng-click="Team($index,line.text,line)" ng-class="{'pushed':line.pushed}">
<li ng-click="Team2($index,line.text,line)">
In css
.pushed{color:red;}
In Controller
`$scope.Team=function(index,text,line){
var obj={};
obj = line;
$scope.linesTwos.push(obj)
line.pushed = true;
}`
`scope.Team2 = function(index,text2,line){
$scope.linesTwos.splice(index,1)
line.pushed = false;
}
`
its because angular two way binding
I want to retrive all the objects with one datakey and multiple values, for QuickSand:
<ul>
<li data-company="Microsoft">Steve</li>
<li data-company="Google">Jobs</li>
<li data-company ="Facebook">Michael</li>
<li data-company ="Google">Richard</li>
<li data-company ="Facebook">Tim</li>
</ul>
How can i retreve all the li items with data-company Microsoft and Google (these two values are in a array) like this:
var itemes = $('ul').find('li[data-comapany={"Microsoft","Google"}]');
Thank you.
you could create an array of the required companies, and check for each li if the data is contained in that array:
var companies = ["Microsoft", "Google"];
$(function() {
var items = $('ul li').filter(function() {
return $.inArray($(this).data("company"), companies) > -1;
});
items.css({
"position": "relative",
"margin-left": "25px"
});
console.log(items);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-company="Microsoft">Steve</li>
<li data-company="Google">Jobs</li>
<li data-company="Facebook">Michael</li>
<li data-company="Google">Richard</li>
<li data-company="Facebook">Tim</li>
</ul>
You could filter it:
var itemes = $('ul').find('li').filter(function(){
return $(this).data('company').match(/Microsoft|Google/);
});
-DEMO-
To handle case for LI without any data-company set, you should use:
var itemes = $('ul').find('li').filter(function(){
var data = $(this).data('company');
return data ? data.match(/Microsoft|Google/) : null;
});
You can also combine selectors:
var items = $("[data-company*='Microsoft'], [data-company*='Google']");
jsFiddle
You could do it like this:
var companies = ['Google', 'Microsoft', 'Waffle House'];
companies.forEach(function(company, index) {
companies[index] = "li[data-company='" + company + "']";
});
$('ul').find(companies.join(',')).css('background', 'red');
I am trying to filter a UL for specific LIs with a keyup text input. Problem is, the LIs are nested within a tree, and the filter only sees the top most LI and doesn't appear to be filtering correctly. Typing Pennsylvania should show ONLY Pennsylvania, and nothing above it. Any ideas? Thanks in advance.
http://www.jsfiddle.net/CDAVZ/412
HTML
<input type='text' value='[Enter search term followed by Return]' class='allW treeSearch' />
<ul id="treeview">
<li data-expanded="true"><span class="icon-location-7 md-moon delBlue treeSpace" data-icon=""></span>
<span class="icon-location-7 md-moon white treeSpace" data-icon=""></span>Root
<ul>
<li data-expanded="true"><span class="icon-stack-6 md-moon delLtBlue treeSpace" data-icon=""></span>
<span class="icon-stack-6 md-moon white treeSpace" data-icon=""></span>Gas Model
<ul>
<li data-expanded="true"><span class="glyphicon glyphicon-globe md-moon delGreen treeSpace"></span>
<span class="glyphicon glyphicon-globe md-moon white treeSpace"></span>United States
<ul>
<li data-expanded="true"><span class="icon-pie md-moon delBlue treeSpace" data-icon=""></span>
<span class="icon-pie md-moon white treeSpace" data-icon=""></span>Pennsylvania
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
jQuery
$('.treeSearch').click(function(){
$(this).val('');
});
$('.treeSearch').keyup(function(){
var searchText = $(this).val();
$('#treeview ul').each(function(){
var currentLiText = $(this).text(),
showCurrentLi = currentLiText.indexOf(searchText) !== -1;
$(this).toggle(showCurrentLi);
});
});
if you do not want to change the html you can change .toggle() for .css("visibility")
$('.treeSearch').click(function(){
$(this).val('');
});
$('.treeSearch').keyup(function(){
var searchText = $(this).val();
$('#treeview li').contents().filter(function() {
return this.nodeType == 3;
}).each(function(){
var currentLiText = $(this).text();
if(currentLiText.replace(/\s+/g, '')!=""){
if(currentLiText.indexOf(searchText) !== -1){
$(this).parent("li").css({"visibility": "visible"});
}
else{
$(this).parent("li").css({"visibility": "hidden"});
}
}
});
});
http://jsfiddle.net/HLWMv/1/
this will only show the actual "li"
to remove the if(currentLiText.replace(/\s+/g, '')!=""){ part you need to remove the extra spaces and new lines in your html
UPDATE
case insensitive
$('.treeSearch').click(function(){
$(this).val('');
});
$('.treeSearch').keyup(function(){
var searchText = $(this).val();
$('#treeview li').contents().filter(function() {
return this.nodeType == 3;
}).each(function(){
var currentLiText = $(this).text().toLowerCase();
if(currentLiText.indexOf(searchText.toLowerCase()) !== -1){
$(this).parent("li").css({"visibility": "visible"});
}
else{
$(this).parent("li").css({"visibility": "hidden"});
}
});
});
http://jsfiddle.net/HLWMv/2/
I removed the spaces in the HTML
Note: This make extensive dom manipulations.... please beware about the cost associated with it
From what I can understand, you need to make dom structure changes to achieve this
$('.treeSearch').click(function () {
$(this).val('');
});
RegExp.quote = function (str) {
return (str + '').replace(/([.?*+^$[\]\\(){}|-])/g, "\\$1");
};
$('#treeview li').each(function () {
var $this = $(this);
var text = $this.contents().map(function () {
return this.nodeType == 3 && $.trim($(this).text()) != '' ? $.trim($(this).text()) : undefined;
}).get().join(' ');
$this.data('parent', $this.parent()).data('text', text);
})
$('.treeSearch').keyup(function () {
var regex = new RegExp(RegExp.quote(this.value), 'i');
var $selected = $('#treeview li').removeClass('selected').hide().filter(function () {
return regex.test($(this).data('text'));
}).addClass('selected').show();
$selected.each(function () {
var $this = $(this),
$parent = $this.parent(),
$ul = $this.data('parent');
var $li = $this;
while ($ul.is(':not(#treeview)') && !$ul.parent().hasClass('selected')) {
$li = $ul.parent();
$ul = $li.parent();
}
$this.appendTo($ul)
})
});
Below is the HTML that I have
<ul id="QBS">
<li>
<a class="qb_mode starting Rodgers" href="#">See Stats</a>
</li>
<li>
<a class="qb_mode Manning" href="#">See Stats</a>
</li>
<li>
<a class="qb_mode Brady" href="#">See Stats</a>
</li>
</ul>
I want to find this unordered list, then tell which item has the starting qb class and then return the class that has their name (brady rodger manning) etc.
What's throwing me in a loop is the fact that the link is wrapped in the list element.
Here is what I am trying:
element = $("#qbs"); // pretty sure I want this vs getElementbyDocumentID
children = element.children();` // gets me all the list elements
for (i=0;i<children.length;i++) {
grandchild = children[i].children();
???? How would I get the 3rd class on this element?
}
Sorry about the formatting.
How about this?
var allClasses = $("#QBS").find('li a[class^="qb_"]')
.map(function () {
return this.className.split(" ").pop();
}).get();
console.log(allClasses);
Fiddle
Provided the class started with qb_* is at the beginning and you want to take only the last class of the match.
if all your class names are qb_mode then:
var allClasses = $("#QBS").find('.qb_mode').map(function () {
return this.className.split(" ").pop();
}).get();
if you want all of them then:
var allClasses = $("#QBS").find('.qb_mode').map(function () {
var cls = this.className.replace(/qb_mode/,'');
return cls.trim().split(/\W+/);
}).get();
console.log(allClasses);
Fiddle
If I understood you correctly, how about:
var name = $('#QBS a.qb_mode.starting').prop('class').replace(/\s*(qb_mode|starting)\s*/g,'');
console.log(name); // Rogers
See demo here.
a=document.getElementById('QBS');
var b=a.getElementsByClassName("qb_mode");
var i, j=b.length, result=[];
for(i=0;i<j;i++) {
c=b[i].className.split(" ");
result.push(c.pop());
}
return result;
fiddle http://jsfiddle.net/3Amt3/
var names=[];
$("#QBS > li a").each(function(i){
var a=$(this).attr("class").split(" ");
names[i]=a[(a.length-1)];
console.log("Name is " + names[i]);
});
or a more precise selector
$("#QBS > li a.qb_mode").each( ....