The layout I'm trying to achieve is this:
<div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
<div class="row">
<div></div>
<div></div>
</div>
</div>
Doing this gets me the divs, but how can I add separators between every two items? I feel like Angular should have an easy way to do this.
<div>
<div class="row">
<div ng-repeat="object in objects"></div>
</div>
</div>
I think, you can solve it using a bit of javascript and ng-repeat like
<div>
<div class="row" ng-repeat="array in obj2">
<div ng-repeat="object in array">{{object}}</div>
</div>
</div>
then in your angular controller create a new object called obj2 using the objects array like
$scope.obj2 = [];
while ($scope.objects.length) {
$scope.obj2.push($scope.objects.splice(0, 2))
}
Demo: Fiddle
If i get what you want to do, you could use the $index property of rgRepeat and then use modulo for that index like:
<div ng-repeat="object in objects">
<div>My Content</div>
<div data-ng-show="$index % 3 == 0">My Seperator</div>
</div>
Related
I've a HTML structure which looks like this :
<div class="row">
<div class="md-4">1</div>
<div class="md-4">2</div>
<div class="md-4">3</div>
</div>
<div class="row">
<div class="md-4">4</div>
<div class="md-4">5</div>
<div class="md-4">6</div>
</div>
<div class="row">
<div class="md-4">7</div>
<div class="md-4">8</div>
<div class="md-4">9</div>
</div>
and I've JS :
var abc = [1,2,3,4,5,6,7,8,9]
currently as per my structure I can't directly run ng-repeat as after every 3 records I want starts and ends
I want something similar like
<div ng-repeat="val in abc" class="row" ng-if="$index%3==0">
<div>{{val}}</div>
</div>
but above codes don't work and I know its incorrect way but I want something similar to that
please try with this code:
<div ng-repeat="val in abc track by $index" class="row" ng-if="$index%3==0">
<div>{{val}}</div>
</div>
If you've used lodash before
var arr = _.chunk(abc,3);
//makes your array like [[1,2,3],[4,5,6],[7,8,9]]
<div ng-repeat = "a in arr" class = "row">
<div ng-repeat="b in a" class="md-4">{{b}}</div>
</div>
you can lookup lodash here
Here's my code:
<div id='layer1'>
<div id='a'>
<div id='b'>
<div id='layer2'>
<div id='a'>
<div id='b'>
<div id='layer3'>
<div id='a'>
<div id='b'>
I want to try to get the element [a] of layer1.
Could I do this using pure javascript and withOUT jquery and other stuff?
An ID uniquely identifies one single element on the page. The behavior you described is more like "a class" inside of an ID:
document.querySelector("#counter-for-drinks .up-arrow")
and so if you want a different up-arrow, it is:
document.querySelector("#counter-for-burgers .up-arrow")
document.querySelector() is what is similar to jQuery $(" "). It also has the form document.querySelectorAll() for getting all matched elements.
Your HTML is missing closing tags. You can always validate your code here.
Also, you should use class instead of id.
<div id='layer1'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer2'>
<div class='a'></div>
<div class='b'></div>
</div>
<div id='layer3'>
<div class='a'></div>
<div class='b'></div>
</div>
You can use javascript to get elements:
document.querySelector("#layer1 .a")
var firstA = document.querySelectorAll('#layer1 #a');
var nodeString = '';
if (firstA.length > 0) {
for (var i = 0; i < firstA.length; i++) {
nodeString = nodeString + firstA[i].innerText + '<br/>';
}
}
document.getElementById('founded-nodes').innerHTML = nodeString;
#founded-nodes {
color: brown;
}
<div id='layer1'>
<div id='a'>layer1 aaa</div>
<div id='b'>layer1 bbb</div>
</div>
<div id='layer2'>
<div id='a'>layer2 aaa</div>
<div id='b'>layer2 bbb</div>
</div>
<div id='layer3'>
<div id='a'>layer3 aaa</div>
<div id='b'>layer3 bbb</div>
</div>
<div id="founded-nodes"></div>
As all said in above over comments and answers, one must use a single id on the same page, or else the use of classes is a must. But if you want to achieve this, you can have a look at code.
That might sound a little confusing, but basically I have some html that looks like this (which is dynamically created)
<body>
<div class="component" id="465a496s5498">
<div class="a-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
</div>
</div>
<div class="random-div">
<div class="random"></div>
</div>
</div>
</div>
<div class="component" id="683fg5865448">
<div class="another-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Wow!</div>
</div>
</div>
<div class="random-div6">
<div class="random2"></div>
</div>
</div>
</div>
<div class="component" id="247487294js5">
<div class="more-containers">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Haha!</div>
</div>
</div>
<div class="random-div6">
<div class="random5"></div>
</div>
</div>
</div>
</body>
And I want to create an array of objects which includes the unique id of the component and the raw HTML within the element with class name "wantThis" (it will always be called "wantThis"), so the array would look like
[{
id: "465a496s5498",
html: "<div class='wantThisHTML'>Hello!<p>I'm another element!</p></div>"
},{
id: "683fg5865448",
html: "<div class='wantThisHTML'>Wow!</div>"
},{
id: "247487294js5",
html: "<div class='wantThisHTML'>Haha!</div>"
}]
As for what i've tried, I split up the elements into an array using var elements = $(body).children, and I know to get the HTML within an element using $(.wantThis).html(), but how can I get the id and the HTML from each of the elements I obtain from the children?
Also, within the wantThis element there may me multiple elements, will $(.wantThis).html() get the raw HTML of ALL the children?
There you go.
var data = $('> .component', document.body).map(function(component) {
return {
id: this.id,
html: $(this).find('.wantThisHTML').html()
}
})
.toArray();
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
<div class="a-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Hello!
<p>I'm another element!</p>
</div>
</div>
</div>
<div class="random-div">
<div class="random"></div>
</div>
</div>
</div>
<div class="component" id="683fg5865448">
<div class="another-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Wow!</div>
</div>
</div>
<div class="random-div6">
<div class="random2"></div>
</div>
</div>
</div>
<div class="component" id="247487294js5">
<div class="more-containers">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Haha!</div>
</div>
</div>
<div class="random-div6">
<div class="random5"></div>
</div>
</div>
</div>
ONE approach to this is....
Select the Nodes (elements) using "querySelectorAll"
let nodeListOfComponentElements = document.querySelectorAll('.component')
This will get you a NodeList. NodeList
You can turn that into an array of Nodes by:
let nodeArray = [].slice.call(nodeListOfComponentElements) SO-Post
Then, using that array of nodes. You can 'map' it to the structure you want.
let result = nodeArray.map(function(item, index) {
let targetElement = item.querySelector('.wantThisHTML')
return {
id: item.id,
html: targetElement.innerHTML
}
})
note: each "item" is an element/node and the method querySelector can be used to select children of that element. I'm targeting the class you mentioned. Then it's just a matter of returning an object for each iteration that the map function executes. You pick the keys and values that the map function returns. Here I'm setting the id key to the id of the element, and the html key to the "innerHTML" of the target child element within each main element.
The resulting structure is as follows:
(3) [{…}, {…}, {…}]
0: {id: "465a496s5498", html: "Hello!<p>I'm another element!</p>"}
1: {id: "683fg5865448", html: "Wow!"}
2: {id: "247487294js5", html: "Haha!"}
length: 3
CodePen: https://codepen.io/nstanard/pen/exOJLw
Don't forget to upvote and approve my answer it helps!
Thanks
To make sure the .component has wanted '.wantThis' child.
var data = $('.wantThis').map(function() {
return {
id: $(this).parents('.component').attr('id'),
html: $(this).html()
}
});
console.log(data);
var data = $('.wantThis').map(function() {
return {
id: $(this).parents('.component').attr('id'),
html: $(this).html()
}
});
console.log(data);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="component" id="465a496s5498">
<div class="a-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Hello!<p>I'm another element!</p></div>
</div>
</div>
<div class="random-div">
<div class="random"></div>
</div>
</div>
</div>
<div class="component" id="683fg5865448">
<div class="another-container">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Wow!</div>
</div>
</div>
<div class="random-div6">
<div class="random2"></div>
</div>
</div>
</div>
<div class="component" id="247487294js5">
<div class="more-containers">
<div class="random-div">
<div class="wantThis">
<div class="wantThisHTML">Haha!</div>
</div>
</div>
<div class="random-div6">
<div class="random5"></div>
</div>
</div>
</div>
<div id="elem">
<div id="elem-content">Element</div>
</div>
<script>
alert(elem); // DOM-element with id="elem"
alert(window.elem); // accessing global variable like this also works
// for elem-content things are a bit more complex
// that has a dash inside, so it can't be a variable name
alert(window['elem-content']); // ...but accessible using square brackets [...]
</script>
reference: https://javascript.info/searching-elements-dom
To start, here's a JSFiddle:
https://jsfiddle.net/RobGADV/kuy8wsLg/
<div class="tocButtonsDiv">
<div class="tocListItems">
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="51" data-title="Bacon Ipsum">Bacon Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="43" data-title="Pirate Ipsum">Pirate Ipsum</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="48" data-title="Klingon Ipsum">Klingon Ipsum</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="8" data-title="klingon anchor">klingon anchor</div>
</div>
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="10" data-title="klingon anchor too">klingon anchor too</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="52" data-title="Plastic Onion Rings">Plastic Onion Rings</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="11" data-title="Condiments">Condiments</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="53" data-title="Porcupines For Fun">Porcupines For Fun</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="54" data-title="Tragedy At 7-11">Tragedy At 7-11</div>
</div>
<div class="tocSubListItems">
<div class="tocSubItemDiv">
<div class="tocSubItem editTocSubTitle" data-proposaltocid="9" data-title="tragedy anchor">tragedy anchor</div>
</div>
</div>
<div class="tocItemDiv">
<div class="tocItem editTocTitle" data-pageid="57" data-title="Something Fancy">Something Fancy</div>
</div>
</div>
</div>
Basically, I have a list of Items and Subitems, as you can see if you run the fiddle. The larger boxes are the Items, the smaller boxes are subitems, grouped below its parent Item. Make sense so far?
I want to be able to do the jqueryUI sortable() routine on each of the sets; meaning, I want to be able to reorder the Items (large buttons), and then also reorder the subItem (small buttons) under its parent Item.
I have the entire thing under a div called tocButtonsDiv. Inside that is a div called tocListItems, which contains ALL of the Items ("tocItem") (and their respective subItems).
The way it is in the Fiddle right now is the only way it works at all, but it's not keeping the subItems with the parent, and in fact, treats the subitems as a single group (whether there's one, two or more). I know my markup may need a little work, but I wonder if the .sortable() method has some more options I'm not aware of that will let me associate the subItems to the Items.
FWIW, the Fiddle as presented doesn't work at all; not sure why. This is my first time actually using JSFiddle.
Thank you for your help!
The content of the divs is going to be populated with javascript json. Now, I know how to select a div in javascript:
var hsc = document.getElementByID("hsc");
But how would I refer to eg. the title but only in the hsc div.
<div id="hsc">
<div id="title"></div>
<div id="jobs"></div>
...
</div>
<div id="cc">
<div id="title"></div
<div id="jobs"></div>
</div>
On a separate note, wouldn't 'title' and 'jobs' be better classified as classes, and not ids?
This would work:
var hsc = document.querySelectorAll("#hsc > .title");
But you need to change to valid html and use unique IDs and classes instead:
<div id="hsc">
<div class="title"></div>
<div class="jobs"></div>
...
</div>
<div id="cc">
<div class="title"></div>
<div class="jobs"></div>
</div>
IDs must be unique in HTML.
Change them to classes, and then you can use querySelector() to target them:
document.querySelector('.hsc .title').style.color= 'blue';
document.querySelector('.cc .title').style.color= 'red';
<div class="hsc">
<div class="title">Make me blue!</div>
<div class="jobs">Jobs</div>
</div>
<div class="cc">
<div class="title">Make me red!</div>
<div class="jobs">More jobs</div>
</div>
Just try
<div id="hsc">
<div id="a" class="title"></div>
<div id="b" class="jobs"></div>
...
</div>
<div id="cc">
<div id="c" class="title"></div
<div id="d"class="jobs"></div>
</div>
Because your HTML code is invalid because the id is already taken.