i am trying to generate a blog list but i got a problem with ng-repeat. my list looks like this
<ul>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<span class="sep2"></sep>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<span class="sep2"></sep>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
<li>
<h2>Title</h2>
<p>Message</p>
</li>
</ul>
So after every 2 list items, i have a span that levels my next 2 boxes.
Right now i have this angular code.
<ul>
<li ng-repeat="post in postsJSON">
<h2>{{post.title}}</h2>
<p>{{post.message}}</p>
</li>
</ul>
And i dont know how to generate that span after every second list item.
Thank you in advance, Daniel!
With angular v1.2 it becomes quite easy, using ng-repeat-start, ng-repeat-end and ng-if, you can check it here : http://jsfiddle.net/DotDotDot/XNJvj/1/
Your code will look like this:
<ul>
<li ng-repeat-start='post in postsJSON'>
{{post.item}}<br/>
{{post.message}}
</li>
<span ng-if="$odd && !$first" ng-repeat-end>
<span class="sep2">_____</span>
</span>
</ul>
ng-repeat-start/end allows you to enter a loop in a tag and close it in another, in this case, I also added a condition using the $odd parameter of the ng-repeat, showing only every other span
The issue here is not really with angular but more with the structure of your markup. ul tag should normally only contains li tags as children.
To resolve your issue I will stick to the ng-repeat you already have and create the separator with css. Something like that :
<ul class="blog list">
<li ng-repeat="post in postsJSON" class="blog entry">
<h2>{{post.title}}</h2>
<p>{{post.message}}</p>
</li>
</ul>
CSS :
.blog.entry {
border-bottom : 1px solid black // or whatever color
...
}
or if you need more control on the separator use css :after and do something like
.blog.entry:after {
content : "";
...
}
If you are not familiar with :after you can have a look there
Related
I've been wrestling with vanilla javascript for GetElementsBy(ID/Tag/Span) for some time, and was wondering if any of you have encountered this or know a solution to this problem.
I'm trying to getElementBy(...) for 3 innerHTML texts in the DOM that looks like this:
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item">
<span class="id_device">
This is the Data I want to Grab
</span>
</li>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item">
<span class="id_device">
This is the Data I want to Grab
</span>
</li>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item">
<span class="id_device">
This is the Data I want to Grab
</span>
</li>
Ultimately, I want to grab all three texts inside the text tag using GetElementsBy(...). What is the right approach to get this data?
Your HTML is pretty messy. I tried to clean it up in the example below, and added some distinct text for each bit of text you're trying to extract so it's more illustrative that we're grabbing 3 different links' texts. The code iterates over the anchors found, and uses the same highly specific selector #Jaromanda X wrote in his comment.
Click the "Run" button below to see it in action.
let anchors = document.querySelectorAll('ul.main_Bucket>li.id_category>span.id_device>a');
console.log(anchors.length, "anchors found");
anchors.forEach((anchor)=>console.log(anchor.innerText));
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item"></span>
<span class="id_device">
ONE: This is the Data I want to Grab
</span>
</li>
</ul>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item"></span>
<span class="id_device">
TWO: This is the Data I want to Grab
</span>
</li>
</ul>
<ul class ="main_Bucket">
<li class="id_category">
<span class="id_item"></span>
<span class="id_device">
THREE: This is the Data I want to Grab
</span>
</li>
</ul>
I've been searching a lot for this, without any solution so far. As you might also have seen the topic title might be a little hard to interpret and that's because I'm not quite sure how to explain it shortly.
The problem
Looking at the HTML below, I know the class of the last element called "active" and this element is chosen dynamically in jQuery, based on which site the visitor is on currently - i.e. different elements has this class depending on the site. On another site the li with class first-sub-li could have the class active (or for that matter the li with class first). This class is, as said, added dynamically based on the site with jquery. From here on I wish to identify the parent of the element with active which is a direct descendent of top-parent and add a class called active-parent to this. I.e. in the case below i wish to add the active-parent class to the li with class second.
EDIT: Please note that the "depth" of the list can vary, therefore also requiring a "dynamic" approach to picking out the parent. I completely forgot this in the initial writing.
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li> <!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
So far I've tried the following jQuery without succes as it doesn't identify it.
EDIT 2: This actually does work, but initially it didn't as it apparently was called before the class was loaded, despite appearing later in the javascript document. Wrapping it in a $(window).on("load", function() solves the problem as shown below.
$(window).on("load", function() {
$(".active").closest("#top-parent > li").addClass("active-parent");
});
The original code was just $(".active").closest("#top-parent > li").addClass("active-parent");
You can start traversing up with .parent(), it will excluding the self li.
$(".active").parent().closest("li").addClass("active-parent");
You can use :has() selector
$('#top-parent > li:has(.active)').addClass("active-parent");
$('#top-parent > li:has(.active)').addClass("active-parent");
.active-parent {
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li"></li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li">
<ul class="second-sub-sub-ul">
<li class="second-sub-sub-li active"></li>
<!-- Here -->
</ul>
</li>
</ul>
</li>
</ul>
I think this is what you're looking for. Find all li which are direct descendants of topmost-parent and filter that for the one which has a child .active. Apply the class.
$('#top-parent > li').filter(function(e){
return $(this).find('.active').length>0;
}).addClass("active-parent");
.active-parent{background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="top-parent">
<li class="first">
<ul class="first-sub-ul">
<li class="first-sub-li">1.1</li>
</ul>
</li>
<li class="second">
<ul class="second-sub-ul">
<li class="second-sub-li active">2.1</li> <!-- Here -->
</ul>
</li>
</ul>
The way that Zendesk's Help Centre works is by printing all the sections onto the page without giving them any unique identifier, so it's a pain if you want to implement any sort of scrollspy (updating a sidenav with where you are on the page), and most importantly anchors so that the sidenav actually works.
I'm not that technical and was wondering if anyone knew of a way to add an ID & class to a series of headers using JS?
I'm thinking for each h2 in section-tree-with-article, adding a unique ID, and a class that matches the h2's text?
Any thoughts?
You need to select all the h2 elements, iterate through them and set a class as well as an id with each iteration.
I've simple set the innerHTML as the class. You can modify it according to your use case.
var headers = document.querySelectorAll("div.section-tree-with-article h2");
headers.forEach(function(header, idx) {
header.className = header.textContent.replace(/\s/g, "-"); //You can modify this accordingly
header.id = "uniqueID" + idx; //And similarily the uniqueID
})
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2>Admin 0</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 1</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 2</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 3 4 5</h2>
</li>
</ul>
<ul>
<li class="section">
<h2>Admin 4</h2>
</li>
</ul>
</div>
Here's the same solution in jquery:
$("div.section-tree-with-article h2").each(function(index, value){
var classToAdd = $(this).text();
$(this).attr('class', classToAdd);
$(this).attr('id', "uniqueID" + index);
})
Although this answer does not address your request for a JavaScript solution, I recommend instead using the Help Center's built-in templating system to iterate on the elements and add classes, directly in the html files. Please note that this is only available in the "Professional" and "Enterprise" Zendesk plans.
This example is probably not the best, since you will end up with spaces or other unusable characters in the value of the h2 elements' class attribute (it will replace {{name}} with the section's name), but I hope it will give you an idea of how this works, and how you might use it to achieve a solution.
<div class="section-tree-with-article">
<ul>
{{#each sections}}
<li class="section">
<h2 class="{{name}}" id="{{id}}">{{name}}</h2>
</li>
{{/each}}
</ul>
</div>
will end up something like this:
<div class="section-tree-with-article">
<ul>
<li class="section">
<h2 class="Admin and Settings" id="12345">Admin and Settings</h2>
</li>
<li class="section">
<h2 class="Getting Started" id="45678">Getting Started</h2>
</li>
...[more sections]...
</ul>
</div>
More info on Help Center templating here:
https://support.zendesk.com/hc/en-us/articles/216367358-Help-Center-templating-cookbook-Professional-and-Enterprise-
This is my html code
<ul class="steps-indicator">
<li ng-repeat="step in steps">
<a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
</li>
</ul>
And this is my css :
.steps-indicator li a:before{
content:url('/img/wizard-arrow.png') no-repeat;
}
The thing i am trying to achieve here is to show different images in front of different anchor elements.
I am using the angular-wizard in ionic for mobile, and customizing the look and feel of the progress bar element. Here is the link http://mgonto.github.io/angular-wizard/
Any help would be appreciated!!
UPDATE:
I think i missread your question. Is that what you need?
Put all the images inside the "step.images" and display this all doing an ng-repeat again.
<ul class="steps-indicator">
<li ng-repeat="step in steps">
<img ng-src="{{img}}" ng-repeat="img in step.images" />
<a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
</li>
</ul>
If you only have 1 image per "step" you don't need to use ng-repeat anymore for the image.
<ul class="steps-indicator">
<li ng-repeat="step in steps">
<img ng-src="{{step.image}}" />
<a ng-click="goTo(step)">{{step.title || step.wzTitle}}</a>
</li>
</ul>
Then just modify your css to show it as you like.
Is that what you need?
I have this menu and I want to set one variable for each li item, and alert with it's text when clicked. This was easy, I solved for this with the script below.
$("ul#menudropd .animal li a").click(function() {
var whatever = $(this).text();
alert(whatever); });
Now, I also need to include the 'parent' (ie, the text in the mainlinks class) in the alert. The parent is usually never clicked, only hovered over to display the children. But, it is text so it should be easy right?
Example:
Currently, you click on "Puppy" and alert says "Puppy". I need to say "Dog : Puppy". Same for the next section. Click on "Kitten" I need the alert to come back as "Cat: Kitten".
I know how to have the alert display both once I get that 2nd variable set, I just can't figure out how to do it without clicking it. Any ideas?
<ul id="menudropdown">
<li class="mainlinks"> Dog
<div class="animal dog">
<li> Puppy </li>
<li> Pup </li>
</div>
</li>
<li class="mainlinks"> Cat
<div class="animal cat">
<li> Kitty </li>
<li> Kitten </li>
</div>
</li>
</ul>
Use closest() and you may also want ul instead of div, the html you have seems invalid as div directly contain li element.
The HTML List item element (<li>) is used to represent a list item. It
should be contained in an ordered list (), an unordered list
() or a menu (), reference.
Live Demo
Html
<ul id="menudropdown">
<li class="mainlinks"> Dog
<ul class="animal dog">
<li> Puppy
</li>
<li> Pup
</li>
</ul>
</li>
<li class="mainlinks"> Cat
<ul class="animal cat">
<li> Kitty
</li>
<li> Kitten
</li>
</ul>
</li>
</ul>
Javascript
$("ul#menudropdown .animal li a").click(function () {
alert($(this).closest('.mainlinks').find('a:first').text());
});
You should find the closest li tag with your mainlinks class and then select the text of the first child.
Like this:
$(this).child().first().text()+" : "+$(this).text();