how to make clickable buttons that add text into a div - javascript

i want to create a function that adds text into an empty div depending on what button is clicked
i'm making a calculator as one of my beginner javascript projects (i know i can just use inputs and the "button" tag but i feel this'll be more original and challenging). i'm trying to add events to all the elements in the queryselector all nodelist, i feel my function is correct and i've tried all i can but the code doesn't seem to work, any help at all would be appreciated.
i am trying to create a kind of like input div that reflects the value or text of the clicked list item
let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += digits[i].innerHTML
});
digits[i].value = [i];
};
<div class="container">
<div class="camper">
<h3 id="insert"></h3>
</div>
<div class="right-box">
<ul>
<li>
<h3 id="equal">=</h3>
</li>
<li>
<h3 id="plus">+</h3>
</li>
<li>
<h3 id="minus">-</h3>
</li>
<li>
<h3 id="multiply">x</h3>
</li>
<li>
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li>
<h3>clear</h3>
</li>
<li>
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>


Typos
it is id="camper" and not class="camper" if you want to use getElementById but you likely want insert instead of camper
it is querySelectorAll(".digit") - you are missing the dot in the class selector
Logic
use this.innerText to get the content of the digit
let digits = document.querySelectorAll(".digit");
let add = document.getElementById("insert");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += this.innerText;
});
};
<div class="container">
<div class="camper">
<h3 id="insert"></h3>
</div>
<div class="right-box">
<ul>
<li>
<h3 id="equal">=</h3>
</li>
<li>
<h3 id="plus">+</h3>
</li>
<li>
<h3 id="minus">-</h3>
</li>
<li>
<h3 id="multiply">x</h3>
</li>
<li>
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li>
<h3>clear</h3>
</li>
<li>
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>
Here is a more elegant way - if you are doing homework, you might want to do more coding before looking :)
let add = document.getElementById("insert");
document.getElementById("container").addEventListener("click",function(e) {
const tgt = e.target;
if (tgt.tagName==="H3") {
const text = tgt.innerText;
const cn = tgt.parentNode.className;
if (cn === "digit" || cn === "oper") add.innerText += text;
else if (cn==="action") {
if (text === "clear") {
add.innerText = "";
}
else if (text === "bkspc") {
add.innerText = add.innerText.slice(0,-1);
}
}
}
})
<div id="container">
<div class="camper">
<h2 id="insert"></h2>
</div>
<div class="right-box">
<ul>
<li class="oper">
<h3 id="equal">=</h3>
</li>
<li class="oper">
<h3 id="plus">+</h3>
</li>
<li class="oper">
<h3 id="minus">-</h3>
</li>
<li class="oper">
<h3 id="multiply">x</h3>
</li>
<li class="oper">
<h3 id="divide">\</h3>
</li>
</ul>
</div>
<div class="write-box">
<ul>
<li class="digit">
<h3>1</h3>
</li>
<li class="digit">
<h3>2</h3>
</li>
<li class="digit">
<h3>3</h3>
</li>
<li class="digit">
<h3>4</h3>
</li>
<li class="digit">
<h3>5</h3>
</li>
<li class="digit">
<h3>6</h3>
</li>
<li class="digit">
<h3>7</h3>
</li>
<li class="digit">
<h3>8</h3>
</li>
<li class="digit">
<h3>9</h3>
</li>
<li class="digit">
<h3>0</h3>
</li>
<li class="action">
<h3>clear</h3>
</li>
<li class="action">
<h3>bkspc</h3>
</li>
</ul>
</div>
</div>


You are losing the scope of digits inside the event listener. You need to bind digits to be the scope of this in the event listener like so:
let digits = document.querySelectorAll("digit");
let add = document.getElementById("camper");
for (let i = 0; i < digits.length; i++) {
digits[i].addEventListener("click", function() {
add.innerHTML += this.innerHTML
}).bind(digits[i]);
digits[i].value = [i];
};

Related

Expand programmatically unwrongest accordion

I'm trying to expand programmatically an accordion menu based on saved values in local-storage.
The problem is that it saves the values, i get back the values, but it's not expanding the active ones.
I use the following accordion library:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul, li>div'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
$(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
$(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
My HTML (i generate the menu from C#) + JS: Init that gets the menus/submenus that i clicked earlier (but not expanding them :o( ):
<!--MENU-->
<div id="pageWrap" class="pageWrap">
<div class="pageContent">
<ul class="accordion">
<div id="menucontent">
<li id="top1">ACCESORII
<ul>
<li id="mid11">ACCESORII PENTRU LANTERNE
<ul>
<li id="sub111"><a href='category.aspx?id=72'>accesorii pentru lanterne portabile</a>
</li>
</ul>
<ul>
<li id="sub112"><a href='category.aspx?id=77'>accesorii pentru lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid12">BECURI DE REZERVA
<ul>
<li id="sub121"><a href='category.aspx?id=67'>becuri de rezerva ambalate individual</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid13">PENTRU CALATORII
<ul>
<li id="sub131"><a href='category.aspx?id=75'>accesorii pentru calatorii</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid14">PENTRU CALCULATOARE, JOCURI SI MUZICA
<ul>
<li id="sub141"><a href='category.aspx?id=79'>pentru calculatoare, jocuri si muzica</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top2">ACUMULATORI
<ul>
<li id="mid21">ACUMULATORI CU TEHNOLOGIA maxE (fara auto-descarcare)
<ul>
<li id="sub211"><a href='category.aspx?id=80'>MARIMEA R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub212"><a href='category.aspx?id=81'>MARIMEA R6 (AA)</a>
</li>
</ul>
<ul>
<li id="sub213"><a href='category.aspx?id=82'>MARIMEA R14 (C)</a>
</li>
</ul>
<ul>
<li id="sub214"><a href='category.aspx?id=83'>MARIMEA R20 (D)</a>
</li>
</ul>
<ul>
<li id="sub215"><a href='category.aspx?id=84'>ACUMULATORI DE 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid22">ACUMULATORI NiMH
<ul>
<li id="sub221"><a href='category.aspx?id=12'>ACUMULATORI MARIMEA R3 (Micro AAA)</a>
</li>
</ul>
<ul>
<li id="sub222"><a href='category.aspx?id=13'>ACUMULATORI MARIMEA R6 (Mignon AA)</a>
</li>
</ul>
<ul>
<li id="sub223"><a href='category.aspx?id=14'>ACUMULATORI MARIMEA R14 (Baby C)</a>
</li>
</ul>
<ul>
<li id="sub224"><a href='category.aspx?id=15'>ACUMULATORI MARIMEA R20 (Mono D)</a>
</li>
</ul>
<ul>
<li id="sub225"><a href='category.aspx?id=16'>ACUMULATORI MARIMEA 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid23">ACUMULATORI PENTRU TELEFOANE DECT
<ul>
<li id="sub231"><a href='category.aspx?id=85'>Marimea R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub232"><a href='category.aspx?id=86'>Marimea R6 (AA)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid24">AUMULATORI Ni-Zn
<ul>
<li id="sub241"><a href='category.aspx?id=96'>ACUMULATORI Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid25">EXTERN
<ul>
<li id="sub251"><a href='category.aspx?id=89'>PowerBank</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid26">HyCell
<ul>
<li id="sub261"><a href='category.aspx?id=91'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid27">PLUMB-GEL RITAR
<ul>
<li id="sub271"><a href='category.aspx?id=98'>ACUMULATOR PLUMB-GEL RITAR</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top3">BABYCARE
<ul>
<li id="mid31">ALARME BEBELUSI (BABYPHONE)
<ul>
<li id="sub311"><a href='category.aspx?id=54'>BABYPHONE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid32">LAMPI DE VEGHE SI LAMPI IN FORMA DE JUCARII
<ul>
<li id="sub321"><a href='category.aspx?id=55'>lampi de veghe si lampi in forma de jucarii</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top4">BATERII
<ul>
<li id="mid41">BATERII ALCALINE
<ul>
<li id="sub411"><a href='category.aspx?id=4'>• BATERII RED LINE</a>
</li>
</ul>
<ul>
<li id="sub412"><a href='category.aspx?id=5'>• BATERII X-POWER</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid42">BATERII BUTON
<ul>
<li id="sub421"><a href='category.aspx?id=6'>• BATERII BUTON ALCALINE</a>
</li>
</ul>
<ul>
<li id="sub422"><a href='category.aspx?id=7'>• BATERII BUTON LITIU</a>
</li>
</ul>
<ul>
<li id="sub423"><a href='category.aspx?id=8'>• BATERII AUDITIVE ZINC AIR</a>
</li>
</ul>
<ul>
<li id="sub424"><a href='category.aspx?id=92'>SET BATERII BUTON HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid43">BATERII LITIU DE MARIMI STANDARD
<ul>
<li id="sub431"><a href='category.aspx?id=58'>• BATERII LITIU in blistere</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid44">BATERII LITIU PHOTO
<ul>
<li id="sub441"><a href='category.aspx?id=59'>• BATERI LITIU pentru aplicatii foto</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid45">BATERII SILVER OXID
<ul>
<li id="sub451"><a href='category.aspx?id=93'>BATERII BUTON SILVER OXID</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid46">TESTERE BATERII SI ACCESORII
<ul>
<li id="sub461"><a href='category.aspx?id=9'>• TESTERE BATERII SI ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top5">INCARCATOARE
<ul>
<li id="mid51">GAMA HyCell
<ul>
<li id="sub511"><a href='category.aspx?id=90'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid52">INCARCATOARE CU ACUMULATORI
<ul>
<li id="sub521"><a href='category.aspx?id=42'>INCARCATOARE CU ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid53">INCARCATOARE CU MICROPROCESOR
<ul>
<li id="sub531"><a href='category.aspx?id=44'>SERIA POWERLINE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid54">INCARCATOARE FARA ACUMULATORI
<ul>
<li id="sub541"><a href='category.aspx?id=94'>INCARCATORI FARA ACUMULATOR</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid55">INCARCATOARE HIGH-TECH CU FUNCTIE DE REIMPROSPATARE
<ul>
<li id="sub551"><a href='category.aspx?id=45'>seria Energy</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid56">INCARCATOARE MULTIMEDIA
<ul>
<li id="sub561"><a href='category.aspx?id=48'>incarcator pentru acumulatori Lithiu-Ion</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid57">INCARCATOARE Ni-Zn
<ul>
<li id="sub571"><a href='category.aspx?id=97'>INCARCATOARE Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid58">INCARCATOARE PENTRU ACUMULATORI PB-GEL SI ACUMULATORI AUTO
<ul>
<li id="sub581"><a href='category.aspx?id=49'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IU</a>
</li>
</ul>
<ul>
<li id="sub582"><a href='category.aspx?id=50'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IUoU</a>
</li>
</ul>
<ul>
<li id="sub583"><a href='category.aspx?id=51'>incarcatoare pentru baterii auto cu plumb sau plumb-gel</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid59">INCARCATOARE RAPIDE
<ul>
<li id="sub591"><a href='category.aspx?id=47'>cu microprocesor pentru pachete de acumlatori</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid510">INCARCATOARE STANDARD
<ul>
<li id="sub5101"><a href='category.aspx?id=41'>BASIC</a>
</li>
</ul>
<ul>
<li id="sub5102"><a href='category.aspx?id=46'>pentru acumulatori NiCd/NiMH</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid511">INCARCATOARE ULTRARAPIDE
<ul>
<li id="sub5111"><a href='category.aspx?id=43'>ULTRARAPIDE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid512">SERIA GLOBAL LINE
<ul>
<li id="sub5121"><a href='category.aspx?id=60'>seria Global line</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid513">SURSE DE ALIMENTARE
<ul>
<li id="sub5131"><a href='category.aspx?id=52'>surse de alimentare universale</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top6">LANTERNE
<ul>
<li id="mid61">INDICATOR
<ul>
<li id="sub611"><a href='category.aspx?id=71'>indicator cu lanterna</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid62">LANTERNE ANTI-EX
<ul>
<li id="sub621"><a href='category.aspx?id=61'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid63">LANTERNE CU CARCASA METALICA
<ul>
<li id="sub631"><a href='category.aspx?id=63'>cu carcasa metalica</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid64">LANTERNE DE FRUNTE
<ul>
<li id="sub641"><a href='category.aspx?id=57'>lanterne de frunte</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid65">LANTERNE DE LUCRU
<ul>
<li id="sub651"><a href='category.aspx?id=95'>LANTERNE DE LUCRU</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid66">LANTERNE HOME DECORATION
<ul>
<li id="sub661"><a href='category.aspx?id=69'>lanterne Lifestyle</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid67">LANTERNE INDUSTRIALE
<ul>
<li id="sub671"><a href='category.aspx?id=78'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid68">LANTERNE LASER
<ul>
<li id="sub681"><a href='category.aspx?id=70'>lanterne laser (Laserpointer)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid69">LANTERNE PORTABILE REINCARCABILE
<ul>
<li id="sub691"><a href='category.aspx?id=65'>lanterne portabile reincarcabile (AS, ASN)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid610">LANTERNE REINCARCABILE
<ul>
<li id="sub6101"><a href='category.aspx?id=66'>lanterne reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid611">LANTERNE SERIA AGENT
<ul>
<li id="sub6111"><a href='category.aspx?id=56'>seria AGENT</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid612">LANTERNE TIP BRELOC
<ul>
<li id="sub6121"><a href='category.aspx?id=64'>tip breloc</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top7">TEHNOLOGIA ZERO WATT
<ul>
<li id="mid71">PRIZE ECOMOMICE ZERO WATT
<ul>
<li id="sub711"><a href='category.aspx?id=53'>seria AES</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
<script src="js/jquery.accordion.source.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
$('ul').accordion();
});
// ]]>
</script>
<script>
/*Main Left Menu Begin*/
var topActiveid = "";
var level1Activeid = "";
var level2Activeid = "";
$(document).ready(function() {
if (localStorage.getItem("activeLeftMenu") != null)
{
var strarray = localStorage.getItem("activeLeftMenu").split("/");
topActiveid = strarray[0].toString();
level1Activeid = strarray[1].toString();
level2Activeid = strarray[2].toString();
$(".accordion>ul>li.active").removeClass("active");
//if ($("#"+topActiveid) =! null)
$("#"+topActiveid).addClass('active');
$("#"+topActiveid).click();
$("#"+topActiveid).slideDown();
//if ($("#"+level1Activeid) =! null)
$("#"+level1Activeid).addClass('active');
$("#"+level1Activeid).click();
$("#"+level1Activeid).slideDown();
//if ($("#"+level2Activeid) =! null)
$("#"+level2Activeid).addClass('active');//$('#topx3').addClass('active'):
$("#"+level2Activeid).click();
$("#"+level2Activeid).slideDown();
// $('#menu li.active').show();
// $('#menu li.active').slideDown('normal');
}
});
</script>
<!--MENU-->
I tried to use click() , slidedown() , show() to expand, but none of them are working. It's just selecting the top level, without expanding (see screenshot / i also attached the link).
img: Not expanding menu - screenshot
link: Website

You have to call the .click() on the a element which handles the click.
Then it is working fine.
Eg.
$('#top6 > a').click()
Or in your code:
$("#"+topActiveid + " > a").click();
The logic to add / remove the active class and also the slidedown() call are not necessary.

jQuery switching lists with same class

I created a bit complex list and I wish after clicking on element with class ".recipes", display it inside paragraph but after clicking on button prev or next, I wish to switch to previous or next element with same class name. I know already how to switch the list if they are next to each other but after putting them inside different parents it seems more complicated:
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>
To show clicked element:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
and to show previous element with class "recipes" I got from another person on this forum is here however because classes have different parents now, it doesn't work, I thought that i can add more parents() and because of that find previous or next ".recipes" but it didn't work out:
$(".prev").click(function() {
var isFirst = $(".recipies.active").is(":first-child");
if(isFirst){
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").prev().trigger("click");
}
});

Check this out:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
$(".prev").click(function() {
var isFirst = $(".recipies.active").text() == $($(".recipies").get(0)).text();
if (isFirst) {
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").parent().parent().prev().find(".recipies").trigger("click");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>

Unexpected behavior of $parent.$index in AngularJS

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.

Show Contents of Drop Down

I have code that when clicked expands a drop down to show a set of links. There are three different drop downs each with a different set of links that show when a user clicks.
The script is below, but it is not dynamic. What is a better and more efficient way to write the script, so I do not need to add to it when additional drop downs are needed?
$(".button-nav1").click(function() {
$(".row1").toggle();
});
$(".button-nav2").click(function() {
$(".row2").toggle();
});
$(".button-nav3").click(function() {
$(".row3").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>

You can reduce your jquery to one function. First listen to divs that have a class that starts with button-nav with the $("div[class^=button-nav]") query. Then get the id and toggle any class with that id with $("."+$(this).attr('id')).toggle();
$("div[class^=button-nav]").on('click',function() {
$("."+$(this).attr('id')).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="row1" class="button-nav1">Joe<span class="crt"> ▼</span>
</div>
<div class="row1 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row2" class="button-nav2">Joe<span class="crt"> ▼</span>
</div>
<div class="row2 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training and Help</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>
<div id="row3" class="button-nav3">Joe<span class="crt"> ▼</span>
</div>
<div class="row3 BGpadding">
<ul class="2ndRESET">
<li class="resetTWO"><strong>Overview</strong>
</li>
<li><strong>Training</strong>
</li>
<ul class="resetTWO">
<li>Lorem Lipsum
</li>
</ul>
<li><strong>Toomy</strong>
</li>
<ul class="resetTWO">
<li>Lipsum
</li>
<li>Loremu
</li>
<li>Lipsum
</li>
</ul>
</ul>
</div>
</div>

From the code provided I assume .row1 is a typo. I hope you mean #row1. If so the code is reduced to
$('.button-nav1,.button-nav2,.button-nav3').click(function(){
$(this).toggle();
}
To combine all three function in one you can add common class to all .button-nav1, .button-nav2 and .button-nav3 (say button-nav) and change the function to
$(document).on('click', '.button-nav', function(){
$(this).toggle();
}

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/

Categories

Resources