We Keep Coding

Access Text of Span Object

So I have ul's on my webpage similar to the one below and I'm trying to loop through each of them to grab a span within the li. Below is an example of how it appears in my HTML:
<ul id="item-NineAM" class="list-group">
<li class="list-group-item w-100 border-dark past">
<span class="badge badge-dark" id="item-time">09:15 AM</span>
<p class="m-1 w-75 item-text">fsda</p>
<button class="btn btn-danger" id="trashCan"><span class="oi oi-trash"></span></button></li>
</ul>
I've set up an interval to grab the span with id #item-time and pass it into my audit function
const listGroup = $(".card .list-group li #item-time");
$.each(listGroup, function(i, itemSpan){
console.log(itemSpan)
auditItem(itemSpan)
})
I've verified in the console that the span is passed into function but I cannot seem to grab the text of it.
<span class="badge badge-dark" id="item-time">09:15 AM</span>
I need to grab the time that's inside of the span. My console tells me it's an object. Any ideas? I've tried .text() and .innerHTML but no luck.
Thanks!

The jquery selector you're assigning to listGroup should be pretty general, so you wouldn't include an id as you'd only get one match.
It looks like you're misusing id. Remember, you can only have a single instance of id and it should only be used to indicate uniqueness. Instead you want item-time to be a class since you can have several instances of classes.
I've corrected some others in your html as well.
const listGroup = $(".list-group li span.item-time");
$.each(listGroup, function(){
console.log($(this).text())
//auditItem(itemSpan)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-group item-NineAM">
<li class="list-group-item w-100 border-dark past">
<span class="badge badge-dark item-time">09:15 AM</span>
<p class="m-1 w-75 item-text">fsda</p>
<button class="btn btn-danger trashCan">
<span class="oi oi-trash"></span>
</button>
</li>
</ul>

I need to change html class attribute for every ng-repeat element with button

i have html div where i use ng-repeat that gives me back elements from array
<div>
<div class="col-sm-3" ng-repeat="el in vm.filmovi " id="filmovi">
<img src="http://image.tmdb.org/t/p/w500/{{el.poster_path}}" style="width:100%;"><br>
<a ng-click="vm.set_favorit(el)" style="cursor:hand; color:white;" uib-tooltip="Postavi u omiljene">
<i class="glyphicon" ng-class="{'glyphicon-star-empty':el.favorit!=true, 'glyphicon-star':el.favorit==true}"
aria-hidden="true"></i></a>
<a href="http://www.imdb.com/title/{{el.imdb_id}}/" style="color:white;">
<strong>{{ el.title | limitTo: 20 }}{{el.title.length > 20 ? '...' : ''}}</strong></a>
<a class="glyphicon glyphicon-share-alt" style="margin-left:5px; color:white;" ng-click="vm.open()" uib-tooltip="share" ></a><br>
{{el.popularity}} <br>
<a style="color:white;" href="#" ng-click="vm.filter(genre)" ng-repeat="genre in el.genres"><small>{{genre.name}} </small></a>
<div ng-init="x = 0">
<span uib-rating ng-model="x" max="5"
state-on="'glyphicon-star'"
state-off="'glyphicon-star-empty'"></span></div>
</div>
</div>
now i created a button that changes value of id "filmovi"
<li><a href="#" ng-hide="vm.ulogovan" ng-click="vm.dugme();" >losta</a></li>
and created function vm.dugme() that gets element by id and sets class atribute to col-sm-4
vm.dugme=function(){
document.getElementById("filmovi").setAttribute("class","col-sm-4");
};
but when i did that only the first element changed
but i need for all of them to change to col-sm-4 , any suggestion?

Don't do DOM manipulation from angularjs controller. Instead make use of directive provided by angular.
You could use ng-class with expression so that whenever expression gets satiesfied the class will be added over that DOM. To add class put addColSm4 flag inside a controller and change that flag from dugme method of your controller. Also by looking at screenshot it seems like you need col-sm-3 class at the beginning, afterwards you need to apply col-sm-4.
HTML
<div class="row">
<div class="col-sm-3" ng-repeat="el in vm.filmovi"
ng-class="{'col-sm-4': vm.addColSm4, 'col-sm-3': !vm.addColSm4 }" >
.. Html will stay as is ..
</div>
</div>
<li>
<a href="#" ng-hide="vm.ulogovan"
ng-click="vm.dugme()">
losta
</a>
</li>
Code
vm.dugme = function (){
vm.addColSm4 = true;
};
Demo Plunker

Highlight clicked hyperlink in angularjs

Below is my HTML code,
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical")' href="javascript:void(0);">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital")' href="javascript:void(0);">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service")' href="javascript:void(0);">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
I want to highlight the selected hyperlink, I have tried many methods in internet but almost all are linked with the URL of the hyperlink. Please help. I have succeed in using hover to highlight when hovering over a link but I'm stuck in highlighting the clicked link.

If you say your code does not have url paths, I'm assuming that all of this needs to happen within the same view and the same controller. In that case, you can put a variable on the scope, say selectedLink, and use ng-class to apply the proper styling:
<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical");selectedLink = "Physical"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Physical'}">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital");selectedLink = "Digital"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Digital'}">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service");selectedLink = "Service"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Service'}">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
css:
.selected { color: yellow; }

You can try something like this:
<a ng-click='addType("Physical"); visited = true' ng-class="{'visited' : visited}" href="javascript:void(0);"></a>

<div id="Navigation" class="md-dialog-full">
<div class="products-options">
<a ng-click='addType("Physical")' href="javascript:void(0);" class="{selectedPhysical}">
<h1>Physical</h1>
<label>An item that is shipped to your customers</label>
</a>
<a ng-click='addType("Digital")' href="javascript:void(0);" class="{selectedDigital}">
<h1>Digital</h1>
<label>Content that is downloaded</label>
</a>
<a ng-click='addType("Service")' href="javascript:void(0);" class="{selectedService}">
<h1>Services</h1>
<label>Provide a Service</label>
</a>
</div>
</div>
in your controller
$scope.addType = function(type){
if(type == 'Physical'){
$scope.selectedPhysical = 'selectedLink'
$scope.selectedDigital = ''
$scope.selectedService = ''
}
else if(type == 'Digital'){
$scope.selectedDigital = 'selectedLink'
$scope.selectedService = ''
$scope.selectedPhysical = ''
}
else{
$scope.selectedService = 'selectedLink'
$scope.selectedDigital = ''
$scope.selectedPhysical = ''
}
}
add css for selectedLink
.selectedLink{
color : Blue;
font-size: 1.2em;
//whatever the changes you want to made for the active link text
}
If you are using this you can overwrite the browser Active pseudo class

Angular, how to set class to the clicked list item and remove from others li items?

I have this list where I'm trying to set class to the clicked list item (but class should be set only for clicked item).
I tried to do by this way but without luck:
<a href=""
ng-ctrl="ThemesCtrl"
ng-click="checkThemeContent(theme);"
ng-repeat="theme in themes"
ng-hide="theme[filterProp] !== filterValue"
class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>
How can i do it please in the right way?
Thanks for any help.

Great.
Sorry because I have not plunker account, so I must explain you on theoretical way.
George, you have to create function in controller that selects your item, for an example, in your case:
$scope.checkThemeContent = function (name) {
$scope.selectedName = name;
}
After this step, you must only call this function in your HTML like this:
<a href=""
ng-class="{selected:theme.name==selectedName}"
ng-click="checkThemeContent(theme.name)"
ng-repeat="theme in themes"
class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>
Please take look on ng-click part. You have to pass some property ('theme.name') of item (in your case 'theme') from list ('themes'), because you can't compare objects.
In ng-class you must also pass the same property as in ng-click.
Hope it helps.

you need change the syntax ng-class directive
<a href=""
ng-class="{'selected':$index==selectedIndex}"
ng-ctrl="ThemesCtrl"
ng-click="checkThemeContent(theme);currentTheme=theme"
ng-repeat="theme in themes"
ng-hide="theme[filterProp] !== filterValue"
class="list-group-item">
<b>{{theme.name}}</b>
<span class="themesListIcons">
<i class="fa fa-check-square-o"></i> {{theme.avg_score}}
<i class="fa fa-comment-o"></i> {{theme.count_of_cards}}
</span>
</a>

If the 'selectedIndex' is your scope variable that represents your selected item in the controller and the 'selected' is your CSS class, try to change the ng-class part like this:
ng-class="{selected: $index==selectedIndex}"

How to find closest <i>?

My HTML Code is as follow :
<div class="listitems">
user1#mail.com
<a style="float: right;vertical-align: top;" data-recom-user="3" data-recom-mile="4">
<i class="icon-eye-open"></i>
</a>
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" title="Recommend this user"></i>
</div>
i have trigger click event on <a> in event handler function i want to access closest <a>
i tried $(this).closest("<i>") in this i got <i class="icon-eye-open"></i> how i can get
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
Element so that i can change some some attributes of it.

Based on your HTML markup, you can use siblings() or next() instead:
$(this).siblings('i')
or:
$(this).next()
Also, note that closest() will traverse up the DOM tree, this method is not using to find the child elements

For getting inner anchor tag:
$(this).find("i")
For sibling:
$(this).siblings("i")

$(this).closest("<i>")
<i class="icon-eye-open"></i>
$(this).find("i .icon-hand-up")
<i style="float: right;vertical-align: top;" data-irecom-done="false" data-irecom-user="3" data-irecom-mile="4" class="icon-hand-up" ></i>
$(this).find("i .icon-hand-up").attr('','') ; // you can change the attribute
or
$(this).parent().find("i:last").attr('','');

$(document).ready(function () {
$(".listitems a").click(function () {
var sss = $(this).find('i');
alert(sss.text());
});
});