So I have a rather basic javascript problem which I have been slamming my head into a wall over for awhile:
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<div class='alist'>
<ul>
<li class='group_1'> An Item </li>
<li class='group_1'> An Item </li>
<li class='group_2'> An Item </li>
</ul>
</div>
<script>
function toggle_item( num ){
$$( 'li.group_' + num ).invoke('toggle');
}
</script>
Basically, I need to create a sweeper that sets the div to display:none if all the li are display:none.
I think it would start like:
function sweep(){
$$('div.alist').each( function( s ) {
ar = s.down().children
});
}
Any suggestions for good tutorials would be welcome as well
Something like this might get you started. You'll need to iterate through the children and check if they're visible. If any of them aren't, set a flag and break from the loop. If the flag is false then you don't need to hide the div.
function sweep(){
$$('div.alist').each( function( s ) {
var shouldHide = true;
var children = s.down().childElements();
children.each(function(li) {
if(li.visible()) {
shouldHide = false;
throw $break;
}
});
if(shouldHide) {
s.hide();
}
});
}
You could use the select() method of Element to find all li descendants. And run a method Array.all for each li and check if all return true. Hide the div if all return true.
function sweep() {
// check each div
$$('div.alist').each(function(element) {
var listItems = element.select('li');
// are the list items of this div hidden?
var listItemsHidden = listItems.all(function(item) {
return item.visible();
});
// hide the div too if so
if(listIemsHidden) {
element.hide();
}
});
}
This code is untested.
This is jQuery solution (Prototype must be something similar):
$('div.alist').css('display', function () {
return $(this).find('li:visible').length < 1 ? 'none' : '';
});
Related
I'm trying to triggers a function on several owl-carousel sliders having the same class. If i do a console.log, it logs twice, but works only on the first slider.
Here's my function:
function setActiveItem(){
var item = $('.owl-item');
var itemLink = $('.owl-item a');
var pos = $('.is-active').parent().parent().index();
$('.slider-mobile').each(function() {
if($(this).find(itemLink).is('.is-active')) {
item.removeClass('active');
$(this).trigger('to.owl.carousel', [pos, 1, true]);
}
})
}
setActiveItem();
And here's a simplified version of my markup:
<ul class="list-container slider-mobile" data-stage-padding-items="200">
<li class="list-item">
item
</li>
</ul>
<ul class="slider-mobile" data-stage-padding-items="200">
<li class="list-item">
item
</li>
</ul>
I'm not sure if i'm using the each() function right, or if it fits my need at all.
Ok i figured it out.
#Reinder Wit you were right i was referencing the item of the first slider only, so both of my sliders were getting the same datas.
I did this:
function setActiveItem(){
$('.slider-mobile').each(function() {
var item = $(this).find('.owl-item');
var itemLink = $(this).find('.owl-item a');
var pos = $(this).find('.is-active').parent().parent().index();
if($(this).find(itemLink).is('.is-active')) {
item.removeClass('active');
$(this).trigger('to.owl.carousel', [pos, 1, true]);
console.log(pos);
}
})
}
setActiveItem();
And it is working now. Thanks for the clue.
You should activate your listener in the document ready like this:
$(document).ready(function(){
setActiveItem();
});
I have the following code.Now I am building the list using Jquery. How do I do this using Javascript/JQuery?
Html(raw)after completion should look like this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="listOne">
<li class="columnItem">John</li><!--will be removed and put under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li><!--will be removed and put under CommonLister-->
</ul>
<ul id="listTwo">
<li class="columnItem">John</li><!--will be removed and put under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li><!--will be removed and put under CommonLister-->
</ul>
<ul id="CommonLister">
<li class="columnItem">John</li>
<li class="columnItem">Mark</li>
</ul>
</div>
Jquery/JavaScrpit
function myFunctioner(){
$(() => {
let names = [];
let nameSet = new Set();
$("li.columnItemer").each((idx, ele) => {
nameSet.add($(ele).html())
});
var $common = $("<ul>").addClass("commmonLister");
nameSet.forEach((name) => {
if ($("li:contains(" + name + ")").length > 1) {
$("li:contains(" + name + ")").remove();
$("<li>").addClass("columnItemer").html(name).appendTo($common);
}
});
$common.appendTo($(".CommonLister"));
});
}
The above code only works if the list already exists on HTML not when dynamically creating the list. I will be building the list by Ajax query. really appreciate in if you guys can show me how to implement the above code dynamically as the list is built on click event.
Here is what I've got. I don't use the new Javascript notation (not really a fan of it), though I'm sure you could transcribe what I've written into ES if you want to keep it consistent in your project.
I took a very similar approach to you, however I did not dynamically create the element. If you know this element will exist on the page anyway, my personal philosophy is just let it exist there and be empty so that you don't have to create it on your own.
If these lists are being loaded dynamically (something I couldn't really test out while using codepen) then put this into a function called after the list elements have been created. Preferably you would simply go through the data when it is loaded and make the applicable DOM changes only once, but sometimes we do what we must
$(function() {
$('#run-code').on('click', function(e) {
e.preventDefault();
//What were you doing? nope.
var currentItems = {}; //Blank object
var $mergeColumn = $('#CommonLister'); //Common list reference
$('.columnItem').each(function(i, el) {
var $el = $(el); //Notation I use to differentiate between the regular HTML Element and jQuery element
if (!currentItems.hasOwnProperty($el.html())) {
//Has this name come up before? if not, create it.
currentItems[$el.html()] = []; //Make it equal to a brand spanking new array
}
currentItems[$el.html()].push(el);
//Add the item to the array
});
$.each(currentItems, function(name, data) {
//Loop through each name. We don't actually use the name variable because we don't care what someone's name is
if (data.length > 1) {
//Do we have more than 1 element in our array? time to move some stuff
$.each(data, function(i, el) {
var $el = $(el); //See note above
if (i == 0) {
//If this is the first element, let's just go ahead and move it to the merge column ul
$el.appendTo($mergeColumn);
} else {
$el.remove(); //Otherwise, we've already got this element so delete this one.
} //end if/else
}); //end $.each(data)
} //end if data.length >1
}); //end $.each(currentItems)
}); //end $.on()
}); //end $()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="run-code" class="btn btn-success">Click Me</button>
<h4>List 1</h4>
<ul id="listOne">
<li class="columnItem">John</li>
<!--will be removed and put under CommonLister-->
<li class="columnItem">James</li>
<li class="columnItem">Mary</li>
<!--will be removed and put under CommonLister-->
</ul>
<h4>List 2</h4>
<ul id="listTwo">
<li class="columnItem">John</li>
<!--will be removed and put under CommonLister-->
<li class="columnItem">Mark</li>
<li class="columnItem">Mary</li>
<!--will be removed and put under CommonLister-->
</ul>
<h4>Common List</h4>
<ul id="CommonLister">
</ul>
I want to build a list that functions like a select or a multiselect given a param. eg. if the parameter is false, select A->select B, unselects A and selects B.
<ul>
<li>a,</li>
<li>b, and</li>
<li>c</li>
</ul>
My initial approach looks something like:
<ul myDirective>
<li ng-model="a">a,</li>
<li ng-model="b">b, and</li>
<li ng-model="c">c</li>
</ul>
Where mydirective watches for clicks on the LIs. On Click it determines if it needs to unselect or unset anything. Then selects the new value an and applies a selected class.
I don't think I'm follows the angular paradigms and I'm looking for some help finding the right path forward.
** Edit **
I'm looking to provide a user experience like: http://jsfiddle.net/qbt2myj8/
in my opinion a custom directive will make your code much clean since you already use AngularJS.
Below is a complete solution using AngularJS Custom Directive that is completely reusable for code organization.
HTML
custom directive default behavior
<ul data-my-directive class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
(This is the screenshot preview only. See PLAYGROUND link below to play around)
HTML
with custom attribute
<ul data-my-directive data-multi-select="true" class="list">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
(This is the screenshot preview only. See PLAYGROUND link below to play around)
Javascript
angular.module('app',[])
.directive('myDirective', function(){
return {
transclude: true,
template: '<div ng-transclude></div>',
link: function(scope, element, attrs){
function addClickListener(i, callback){
selections[i].addEventListener('click', function(){
callback(i);
}, false);
}
// Set up attribute value. Goes to default if attribute is not set up
attrs.multiSelect = attrs.multiSelect || 'false';
scope.isSelected = [];
var selections = element[0].getElementsByTagName('li');
if(attrs.multiSelect === "true"){
for(var i = 0; i < selections.length; i++){
scope.isSelected[i] = false;
addClickListener(i, function(i){
if(scope.isSelected[i] === true){
// if previously it is selected (red color), now make it unselected (black color / default color)
angular.element(selections[i]).removeClass('selected');
scope.isSelected[i] = false;
} else {
// previously black color, so change it to red color
angular.element(selections[i]).addClass('selected');
scope.isSelected[i] = true;
}
});
}
} else {
var currentSelection = -1;
for(var i = 0; i < selections.length; i++){
scope.isSelected[i] = false;
addClickListener(i, function(i){
if(scope.isSelected[i] === true){
// do nothing
} else {
// previously black color, so change it to red color
angular.element(selections[i]).addClass('selected');
scope.isSelected[i] = true;
angular.element(selections[currentSelection]).removeClass('selected');
scope.isSelected[currentSelection] = false;
currentSelection = i;
}
});
}
}
}
}
});
And finally, the ultimate
PLAYGROUND
to play around!
I hope it clears up your requirements. Have a nice day :)
My approach would be (at first) not to make a directive at all, but a custom JavaScript data structure. Quick example out of my mind :
/**
* Makes a selector data structure
* #param items elements to be listed
* #param multi whether multiple selection is supported
* #returns {{cells: *, selectedItems: selectedItems, unselectAll: unselectAll}}
*/
function makeSelector (items, multi) {
var cells = items.map(function (item) {
// each cell wraps an item and a selected flag
return {
item: item,
selected: false
};
});
// returns an array of the currently selected items
function selectedItems() {
return cells
.filter(function (cell) {
return cell.selected;
})
.map(function (cell) {
return cell.item;
});
}
// unselects all items
function unselectAll() {
cells.forEach(function (cell) {
cell.selected = false;
})
}
// adding methods to cells
cells.forEach(function (cell) {
cell.selectMe = (multi
? function () {
cell.selected = true;
}
: function () {
unselectAll();
cell.selected = true;
});
cell.unselectMe = function () {
cell.selected = false;
};
cell.toggle = function () {
if (cell.selected) {
cell.unselectMe();
} else {
cell.selectMe();
}
}
});
return {
cells: cells,
selectedItems: selectedItems,
unselectAll: unselectAll
};
}
This will allow you to easily retrieve your list of selected items in your controller:
// ...
$scope.abcSelector = makeSelector(['A','B','C'],false);
var getSelectedItems = $scope.abcSelector.selectedItems; // to do something with them in your controller
// ...
Then use Angular data-binding to reflect this data-structure in your HTML:
<h3>List of items :</h3>
<ul>
<li ng-repeat="cell in abcSelector.cells" ng-click="cell.toggle()"
ng-class="{'active': cell.selected}">
{{cell.item}}
</li>
</ul>
<h3>List of selected items :</h3>
<ul>
<li ng-repeat="item in abcSelector.selectedItems()">
{{item}}
</li>
</ul>
and if you fell like it factor this out in a directive, which will typically bind the list of the selected items to an ng-model.
The following is my dropdown list.
<ul id="navBar" data-value="">
<li data-city-value="blore">Bangalore
<ul>
<li data-city-value="delhi">Delhi</li>
<li data-city-value="che">Chennai</li>
<li data-city-value="jaipur">Jaipur</li>
<li data-city-value="hyd">Hyderabad</li>
<li data-city-value="mum">Mumbai</li>
<li data-city-value="pune">Pune</li>
</ul>
</li>
</ul>
And the following are my methods I tried to access the data-city-value attribute.
Method 1)
var cityName = document.getElementById('navBar');
var city = cityName.getAttribute('data-city-value');
alert(city);
It alerts "null"
Method 2)
var cityName = document.getElementById('navBar');
var city = cityName.dataset.cityValue;
alert(city);
It alerts "undefined".
Method 3)
$('#navBar li').click(function() {
$(this).parent().data('value', $(this).data('cityValue'));
});
alert($('#city').data('value'));
It alerts "undefined".
I checked the syntax to get data value here
It would be of great help if you can help me find where I am doing mistake.
Thanks. :)
IN your first two methods you target the top ul with id navBar. In the third method you do $(this).parent() which again takes you to the ul element.
That element does not have the data-city-value attribute.
The jquery method should be
$('#navBar').on('click','li', function(e) {
var city = $(this).data('city-value');
alert(city);
return false;
});
Demo at http://jsfiddle.net/gaby/Mb7KS/
As pointed out by Gaby, you need to reach the element firts. Try this:
$('#navBar:first-child')
This is how you can iterate through your data-city-value attributes:
$('li[data-city-value]').each(function(index,element){
alert($(element).data('city-value'));
});
You can also check my jsFiddle example.
For click events:
$(document).ready(function()
{
$('li').click(function() {
alert($(this).data('city-value'));
return false;
});
});
You should return false because the top li element has inner elements and it was triggering inner li element click event.
My second jsFiddle demo.
<ul id="types" style="list-type:none;">
<li id="categories" style="list-type:none;">1
<ul>
<li style="list-type:none;">1</li><br/>
<li style="list-type:none;">1</li>
</ul>
</li>
<li id="categories" style="list-type:none;">2
<ul>
<li style="list-type:none;">2</li><br/>
<li style="list-type:none;">2</li>
</ul>
</li>
<li id="categories" style="list-type:none;">3
<ul>
<li style="list-type:none;">3</li><br/>
<li style="list-type:none;">3</li>
</ul>
</li>
</ul>
i am moving the li up and down ,when i am doing like this i have written the code for calling one jquery _mouseStop function(event,noPropagation))
in this function i am writing
var tagetNode = this.currentItem[0].parentNode.id
if (this.element[0].id == "categories") {
var targetlistlength = document.getElementById(targetListId).getElementsByTagName("li").length;
// var targetlistlength = this.parentNode.getElementsByTagName("li").length;
var PageIds = "";
for (var i = 0; i < targetlistlength; i++) {
PageIds += document.getElementById(targetListId).getElementsByTagName("li")[i].getAttribute("value") + ",";
}
}
when i am sorting the child li's the above function get called but it is always getting the first child ul of first li length only.. i want the current ul li's length which i am trying to sort
i have tried with the commented line also to get the length of li's but iam getting error as this.parentNode is undefined
anyone please suggest me what can i do
As there is no working demo available, you can check what you get when you use console.log($(this)); inside that function when mouseStop event occurs in console. If you get the expected li in the console then you can executing the following code to get the length of its parent's childs.
alert($(this).parent().children().length);
There mustn't be multiple elements with the same id.
Try to replace them with classes or make them unique.
The if-condition could be the following if you have unique id's (e.g. categories-1, categories-2, ...)
if (this.element[0].id.match("^categories") != null) { ... }
Or if you use classes the if-condition could be:
if (this.element[0].className.match("(^| )categories( |$)") != null) { ... }