I have this simple structure:
<div class="outer-div">
<div class="inner-div-1">inner div 1</div>
<div class="inner-div-2">inner div 2</div>
<div class="inner-div-3">inner div 3</div>
<div class="inner-div-4">inner div 4</div>
</div>
Trying to select all the inner divs but the second one. Using angular.element('div', '.outer-div') will select each div. I need to select only the 1st, 3rd and 4th. Is there a simple way to do this, preferably using a single angular.element?
Here is an example: https://codepen.io/neptune01/pen/ppBrKY?editors=1111
You could consider something like below, but its highly discourage to do DOM manipulation from angular controller. I'd recommend to create directive for the same.
var childs = angular.element('.outer-div').children();
colorElementExclude([1], childs);
function colorElementExclude(excludedElement, childrens){
//add exclude class on element to be excluded
excludedElement.forEach(function(el) {
childrens.eq(el).addClass('exclude');
});
childrens.not(".exclude").css({ 'color': 'grey' });
}