Unexpected behavior of $parent.$index in AngularJS

Unexpected behavior of $parent.$index in AngularJS - javascript

I have a code like this :
<script type="text/ng-template" id="something.html">
<div>
Hey!
</div>
</script>
<div ng-repeat="colum in columns">
<ul>
<li ng-repeat="list in column" id="{{$parent.$index}}" ng-include="something.html">
</li>
</ul>
</div>
The ids are assigned as 1, 2, 3, 4 on the li elements. I am expecting that if columns has 4 elements then the ids for li inside a ul element should be 0,0,0,0.
Rendered DOM is something like :
<div>
<ul>
<li id="0">
</li>
<li id="1">
</li>
</ul>
</div>
<div>
<ul>
<li id="0">
</li>
<li id="1">
</li>
</ul>
</div>
My expected DOM :
<div>
<ul>
<li id="0">
</li>
<li id="0">
</li>
</ul>
</div>
<div>
<ul>
<li id="1">
</li>
<li id="1">
</li>
</ul>
</div>
Apologies if I missed something obvious.

Related

Why is the length of an html collection coming as zero?

When I am using the length property over the HTML Collection,I am getting zero...Please Correct me someone..
My HTML Code:
<div class="container">
<div class="header">
<h1>To Do List</h1>
</div>
<div class="todos">
<ul class="todolist">
<li class="listItem">
<p>Doing Homework</p>
</li>
<li class="listItem">
<p>Doing Competitve Programming</p>
</li>
<li class="listItem">
<p>Doing Dynamic Programming</p>
</li>
<li class="listItem">
<p>Doing Robot Programming</p>
</li>
<li class="listItem">
<p>Doing DSA</p>
</li>
</ul>
</div>
</div>
</body>
MY JS Code:
function crossAdder() {
var todolist = document.getElementsByClassName('.listItem');
console.log(todolist.length);
}
crossAdder();

Remove . in .listItem when you input to document.getElementsByClassName function.
It accept a class name, not a CSS selector.
function crossAdder() {
var todolist = document.getElementsByClassName('listItem');
console.log(todolist.length);
}
crossAdder();
<div class="container">
<div class="header">
<h1>To Do List</h1>
</div>
<div class="todos">
<ul class="todolist">
<li class="listItem">
<p>Doing Homework</p>
</li>
<li class="listItem">
<p>Doing Competitve Programming</p>
</li>
<li class="listItem">
<p>Doing Dynamic Programming</p>
</li>
<li class="listItem">
<p>Doing Robot Programming</p>
</li>
<li class="listItem">
<p>Doing DSA</p>
</li>
</ul>
</div>
</div>
</body>

function crossAdder(){
//Use query selector if you are using .listItem
var todoList = document.querySelectorAll(".listItem")
//If you are using getElementsByClassName don't use the dot only need just listItem
var todoList = document.getElementsByClassName("listItem")
console.log(todoList)
}

Get parent child label/value upon checkbox selection of child li elements

I'm trying to get the value of the lvl1 and lvl2 li labels upon selection of the checkbox of their respective child li.
<ul class="list" >
<li class="lvl1">
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to get the value upon checkbox for their respective parents-child relationship
Click first checkbox to get this value.
Level-1 > Level-2 > Level-3 Value 1
Click 2nd checkbox to get the below value.
Level-1 > Level-2 > Level-3 Value 2

you can add on change event and get all li parents of changed input to get the info about the li 'level' I added this as data attribute:
$(document).ready(function(){
$('.childbox').change(function(){
var parents="";
var current_value=$(this).val();
$(this).parents('li').each(function( index ) {
parents= $(this).data('level-name')+" > "+parents;
});
console.log(parents+" : "+current_value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="list" >
<li class="lvl1" data-level-name='Level 1'>
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2" data-level-name='Level 2'>
<a><label>Level-2</label></a>
<ul>
<li class="lvl3" data-level-name='Level 3'>
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2" data-level-name='Level 2'>
<a><label>Level-2</label></a>
<ul>
<li class="lvl3" data-level-name='Level 3'>
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>

I wrote up some example code as to how to do it. I would use relative selectors to accomplish this.
$("input[type=checkbox]").change(function () {
console.log($(this).closest(".lvl2").find("label").html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list" >
<li class="lvl1">
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-3</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>

Try this .i was added code for 'leve1,level2' and label,input value.you could select as your wish
$('input:checkbox').click(function(){
console.log($(this).closest('.lvl1').text())
console.log($(this).closest('.lvl2').find('label').text())
console.log($(this).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li class="lvl1">
<a>
<h4>Level-1</h4>
</a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1" />
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2" />
</li>
</ul>
</li>
</ul>
</li>
</ul>

Get an list of datas and store in array in jquery

I have a struture of html like below,This is what there will be list of option
<div class='col-sm-4'>
<div id='selectiondata' class="panel panel-default">
<div class="panel-body">
<h2 class='headerText'>Selections</h2>
<p style="font-size: 14px;">Select only that apply to you.</p>
<ul>
<li id="item1" data-cat="fruits">Banana</li>
<li id="item2" data-cat="fruits">Pineapple</li>
<li id="item3" data-cat="fruits">Oragne</li>
<li id="item4" data-cat="fruits">MAngo</li>
<li id="item5" data-cat="Vegetables">Beans</li>
<li id="item6" data-cat="fruits">jackfruit</li>
<li id="item7" data-cat="Vegetables">carrot</li>
</ul>
</div>
</div>
</div>
From above div when user clicks it moves to adjacent div,this has a sturcture like below.
<div id="categories" class="panel-default">
<div class="panel-body">
<div class="alert alert-info hidden endMsg">Your data categorized. Once done, click the next button to continue.</div>
<h2 class='headerText'>Categories</h2>
<ul>
<li id="cat-fruits">
<span>fruits</span>
<ul>
<li id="item5" data-cat="fruits">MAngo</li>
<li id="item1" data-cat="fruits">Banana</li>
<li id="item3" data-cat="fruits">Oragne</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-Vegetables">
<span>Vegetables</span>
<ul>
<li id="item4" data-cat="Vegetables">Beans</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-dolls">
<span>dolls</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
<li id="cat-medical">
<span>Medical</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
</ul>
</div>
</div>
jquery function to fetch array of data
function saveData() {
userData = [];
$('#categories ul li ul li.selected').each(function(index, element) {
if ($.inArray($(this).text(), userData) < 0) {
userData.push($(this).html());
}
});
I want to fetch datas like
[MAngo,banana,Oragne,beans]
Here i will be having two divs,one div shows list of selection as shown in below figure, when user click on particular elemnet, that elemnet will be moved to next adjacent div(categories).I want to get this datas.
----------- ----------
|Banana | | MAngo |
|Pineapple | | Banana |
|Oragne | | Oragne |
|MAngo | | Beans |
|Beans | |_________|
|jackfruit |
|carrot |
-----------
The above jquery used is not fetching any data from html, How could i acheive this. Please help me.

Would it be easier to add each item to the array when that item is clicked (and doesn't exist yet in the array)?
var arr = [];
$("#categories [id^=item]").click(function() {
if(arr.indexOf($(this).html())<0) arr.push($(this).html());
})
console.log(arr);

If you want to use data attr in #nicael code use
var arr = [];
$("#categories").data("cat").each(function() {
arr.push($(this).html());
})
console.log(arr);

var arr = [];
$('li[data-cat]').each(function() {
arr.push($(this).html());
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories" class="panel-default">
<div class="panel-body">
<div class="alert alert-info hidden endMsg">Your data categorized. Once done, click the next button to continue.</div>
<h2 class='headerText'>Categories</h2>
<ul>
<li id="cat-fruits">
<span>fruits</span>
<ul>
<li id="item1" data-cat="fruits">Mango</li>
<li id="item2" data-cat="fruits">Banana</li>
<li id="item3" data-cat="fruits">Oragne</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-Vegetables">
<span>Vegetables</span>
<ul>
<li id="item4" data-cat="Vegetables">Beans</li>
<li class="no-expenses" style="display: none;">No items selected</li>
</ul>
</li>
<li id="cat-dolls">
<span>dolls</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
<li id="cat-medical">
<span>Medical</span>
<ul>
<li class="no-expenses">No items selected</li>
</ul>
</li>
</ul>
</div>
</div>

How to set alternating color to nested and sibling divs with certain class.

I have a nested list, each list item has a container div with class R
I am trying to apply alternating colors to alternate divs. The problem is that divs with class are not always siblings.
This is my html:
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two
<div>
</li>
<li>three</li>
</ul>
</li>
</ul>
This is how I want it to look(I have harcoded colors with inline css)
<ul>
<li>
<div class="R" style="background-color:red;">Bat</div>
<div class="R" style="background-color:green;">description</div>
</li>
<li>
<div class="R" style="background-color:red;">Cat</div>
</li>
<li>
<div class="R" style="background-color:green;">Rat</div>
<ul>
<li>
<div class="R" style="background-color:red;">one
<div class="R" style="background-color:green;">blah</div>
<div class="R" style="background-color:red;">blah blah</div>
</div>
</li>
<li>
<div class="R" style="background-color:green;">two
<div>
</li>
</ul>
</li>
</ul>

Try this : you can use :odd and :even jQuery selectors to get odd and even divs and apply background color accordingly. See below code
$(function() {
$('ul div.R:odd').addClass('oddColor');
$('ul div.R:even').addClass('evenColor');
});
.oddColor {
background-color: red;
}
.evenColor {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two
<div>
</li>
<li>three</li>
</ul>
</li>
</ul>

$(document).ready(function() {
$(".R:even").css("background-color", "green");
$(".R:odd").css("background-color", "red");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two</div>
</li>
<li>Three</li>
</ul>
</li>
</ul>
$(function() {
$('ul div.R:odd').addClass('oddRow');
$('ul div.R:even').addClass('evenRow');
});
.oddRow {
background-color: red;
}
.evenRow {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two</div>
</li>
<li>Three</li>
</ul>
</li>
</ul>

$('div.R').each(function(index) {
$(this).css('background-color', index % 2 === 0 ? '#cc0' : '#0cc');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li>
<div class="R">Bat</div>
<div class="R">description</div>
</li>
<li>
<div class="R">Cat</div>
</li>
<li>
<div class="R">Rat</div>
<ul>
<li>
<div class="R">one
<div class="R">blah</div>
<div class="R">blah blah</div>
</div>
</li>
<li>
<div class="R">two</div>
</li>
<li>three</li>
</ul>
</li>
</ul>

Wrap n-th or less element, wrong result

I have drop down menu in wordpress and I have small problem with wrap nth(every 4th element) li.
My code
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<li> Test1</li>
<li> Test2</li>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<li> Test3</li>
<li> Test4</li>
<li> Test5</li>
<li> Test6</li>
<li> Test7</li>
<li> Test8</li>
<li> Test9</li>
<li> Test10</li>
<li> Test11</li>
<li> Test12</li>
</ul>
</li>
jQuery code
var divs = $("ul.sub-menu > li");
for(var i = 0; i < divs.length; i+=4) {
divs.slice(i, i+4).wrapAll("<div class='column'></div>");
}
My results (wrong)
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<div class="column">
<li> Test1</li>
<li> Test2</li>
<li> Test3</li>
<li> Test4</li>
</div>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<div class="column">
<li> Test5</li>
<li> Test6</li>
<li> Test7</li>
<li> Test8</li>
</div>
<div class="column">
<li> Test9</li>
<li> Test10</li>
<li> Test11</li>
<li> Test12</li>
</div>
</ul>
</li>
What I try achieve:
<li id="item1"> ... </li>
<li id="item2"> ... </li>
<li id="item3">
<ul class="sub-menu">
<div class="column">
<li> Test1</li>
<li> Test2</li>
</div>
</ul>
</li>
<li id="item4">
<ul class="sub-menu">
<div class="column">
<li> Test3</li>
<li> Test4</li>
<li> Test5</li>
<li> Test6</li>
</div>
<div class="column">
<li> Test7</li>
<li> Test8</li>
<li> Test9</li>
<li> Test10</li>
</div>
<div class="column">
<li> Test11</li>
<li> Test12</li>
</div>
</ul>
</li>
any idea what I do wrong? It's necessary because "item3" and "item4" are diffrents category and with my code li elements are mix if in first ul is less then 4 items

Wow, what you just did, I didn't know it was possible. :)
Anyway:
$('.sub-menu').each(function() {
var children = $(this).find('> li');
for (var i = 0; i < children.length; i+=4) {
children.slice(i, i+4).wrapAll("<div class='column'></div>");
}
});
This will use the functionality you tried, but it will loop through every submenu independently and the items will be properly grouped.
http://jsfiddle.net/9NUwJ/

Develop Reference

JavaScript is the programming language of the Web.

Unexpected behavior of $parent.$index in AngularJS - javascript

Related

Why is the length of an html collection coming as zero?

Get parent child label/value upon checkbox selection of child li elements

Get an list of datas and store in array in jquery

How to set alternating color to nested and sibling divs with certain class.

Wrap n-th or less element, wrong result

Categories

Resources