some body please explain me how to get specific class name in nestloop.
<header class="secreportChartHeader">
<span class = "secreportChartHeaderTitle">
<div id="Global" class ="headerglobal">
<div id="left" >log severity by Datenumber</div>
</div>
</span>
<header>
I would like to change 'log severity by dataenumber' : color,size,font.
var header = $element[0].children[0]; // it contains the above html tags
I am tried like this getting an error blocks are nested too deeply.
var chartHeader = header.getElementsByClassName('header');
for(var i=0; i<chartHeader.length; i++) {
if(chartHeader[i].className === 'secreportChartHeaderTitle') {
chartHeader[i].style.color = 'red';
}
}
AngularJS has a small version of jQuery in it (jq Lite) that you could utilize for grabbing an element with a class name very easily with $('.secreportChartHeader')
See documentation here: https://docs.angularjs.org/api/ng/function/angular.element
From a code perspective, the main problem I see is that you are looking for an element with the class name 'header' which does not exist. If you want to grab the header element, just use the native angular element selector angular.element('header')
Hope that helps! Good Luck!
Related
So I have a file like
<div class="u1">
<p id="level1"></p>
<p id="level2"></p>
</div>
<div class="u2">
<p id="level1"></p>
<p id="level3"></p>
</div>
and if I use something like
document.getElementbyId("level1").innerText(or innerHtml) = "Hello"
it writes that string on one element, and not on every element with id="level1"
I tried with
$('#level1').text("Hello");
but it works only for one.
I need something to write a string on every element with id="level1".
ID is a unique identifier, so you can't have few items with the same ID. Provided HTML code is invalid. You can use CLASS attribute or data-id or....
If you can't change HTML and it comes from third-party dependency, then we have a list of NOT recommended but WORKING solutions
jQuery:
$('[id="level1"]').text("Hello");
js:
var elements = document.querySelectorAll('#level1'); + for loop to iterate elements
And a lot of similar solutions based on knowledges how elements selecting works under the hood
It is ideal to have Unique Ids and thus you cannot update it this way. What you can do is you can give it a class like this:
<div class="u1">
<p id="level1" class="helloText"></p>
<p id="level2"></p>
</div>
<div class="u2">
<p id="level1" class="helloText"></p>
<p id="level3"></p>
</div>
Now use this JS to update the HTML:
var paras = document.getElementsByClassName("helloText");
for (i = 0; i < paras.length; i++) {
paras[i].innerHTML = "Hello";
}
You can also remove the Ids or make them unique to make your code cleaner. It is never recommended to use duplicate Ids.
You give a classname to the elements you need:
class = "levels"
in the script, use document.getElementsByClassName, which return an array with all elements. then you can loop through that array to get the info of each elements.
let levels = document.getElementsByClassName("levels");
for (let j=0; j<levels.length; j++){
levels[j] do something...;
}
Good morning,
I don´t even have a problem but I am curious, is it possible to add an ID to a HTML-Tag locally in angular. So that only the component which defines it is able to access it? My idea is to set the id and access it later in the JS-Function. But I´m afraid that could lead to more than one result when calling document.getElementById(this.configurationHeader.id.toString());.
(like the button in the code below)
Kind regards
Paul
changeFavoriteApperance() {
let _isFavorite = this.browserStorage.idIsFavorite(this.configurationHeader.id);
let _button = document.getElementById(this.configurationHeader.id.toString());
let _id = [];
_id.push(this.configurationHeader.id);
_button.style.color = _isFavorite ? 'yellow' : 'inherit';
}
<div class="container">
<h4 class="child name">{{configurationHeader.name}}</h4>
<p class="child description">{{configurationHeader.description}}</p>
<button name="favorite" class="favorite" (click)="this.changeFavoriteStatus()" id={{this.configurationHeader.id}}>⚝</button>
</div>
You need to enclose the interpolation in double quotes. And the this keyword isn't required.
<button
name="favorite"
class="favorite"
(click)="changeFavoriteStatus()"
id="{{configurationHeader.id}}"
>⚝</button>
Alternatively you could bind to the attribute property using [id]="configurationHeader.id".
However in Angular, there are better ways to handle tag specific properties instead of dynamically modifying the id.
I have been trawling around all day trying to fix this issue I am sure it is simple but I will be darned if I can figure it out.
I have tried the archive and cannot seem to find the solution to my particular issue, so any help will be very gratefully received!
I am wanting to add a style to an individual element when a list item is clicked. The list Item Id's and associated div classes are created dynamically in my php code.
With my script I have got as far as getting an alert box appearing as a test to show that the onclick event attached to the list item is returning the correct value. In this case ID and class "1995"
However when I add the correctly returned value into my script using
document.getElementsByClassName(supplyClass).style.display = "none";
In the console I get
"Uncaught ReferenceError: reply_click is not defined"
Abridged code is below with the succesful alert line commented out.
function reply_click(supplyClass) {
//alert(supplyClass);
document.getElementsByClassName(supplyClass).style.display = "none";
}
<div class="supply-container">
<div class="supply-menu">
<ul>
<li id="1995" onClick="reply_click(this.id)">Desking Systems</li>
</ul>
<div>
<div class="supply-content-container">
<div class="1995 supply-content" >
<p>LorumIpsum</p>
</div>
</div>
</div>
As your event handler is passing id of clicked element you need to use document.getElementById to find the element and make the display to none as below
function reply_click(supplyClass)
{
alert(supplyClass);
//document.getElementsByClassName(supplyClass).style.display = "none";
document.getElementById(supplyClass).style.display = "none";
}
<div class="supply-container">
<div class="supply-menu">
<ul>
<li id="1995" onClick="reply_click(this.id)">Desking Systems</li>
</ul>
<div>
<div class="supply-content-container">
<div class="1995 supply-content" >
<p>LorumIpsum</p>
</div>
</div>
</div>
document.getElementsByClassName(supplyClass) returns list of elements so you can't set its style directly.
If you want to set style for all elements returned this way then you can do it like this.
const els = document.getElementsByClassName(someClass);
for (let i = 0; i < els.length; i++) {
els[i].style.display = 'none';
}
Thanks Felix & Sumeet The line of correct code that worked is as follows.
document.querySelector('.supply-' + supplyClass).style.display = 'none';
I had not realised you cannot start a class name with an integer so appended the word supply with a hyphen to the supplyClass value and it worked fine.
Thanks again.
I am trying to write a script that will get the grab the only if the parent structure is div.main-element input+label+ul.
Is there any appropriate way to set that up using javascript or jquery?
If anyone could direct me to the appropriate answer or documentation that would be absolutely awesome.
My end goal would be to replace the ul>li with an hr tag using either an append or .replace()
here is my HTML:
<div class='main-element'>
<input>
<label></label>
<ul>
<li>Example</li>
</ul>
</div>
<div class='main-element'>
<input>
<label></label>
</div>
You could check if the element that you want exists using this kind of code in jquery :
if($("div.main-element ul li").length){
//your code
}
This will execute on your html example, next you can modify the value of the first element using :
$("div.main-element ul li").append("blahblahblah");
Note that this gives you access to the first li tag found inside of a div.main-element>ul of your html page.
You can provide a second argument to a jquery call that is the parent container within which you want to get elements from. There is also a find function that does the same thing.
HTML:
<div class='main-element'>
<input>
<label></label>
<ul>
<li>Example</li>
</ul>
</div>
<div class='secondary-element'>
<input>
<label></label>
</div>
JS:
var $secondaryElement = $('.secondary-element');
var $secondaryInput = $('input', $secondaryElement);
Another approach:
var $secondaryInput = $('.secondary-element').find('input');
Both of the examples above will return ONLY the input element inside of the secondary-element div.
Does that answer your question?
Links:
https://api.jquery.com/find/
and
https://api.jquery.com/jquery/#selector-context
This will get all elements with your composition and replace ul>li by hr.
var elements = document.querySelectorAll(".main-element input+label+ul li");
for(var i = 0; i < elements.length; i++){
var parent = elements[i].parentNode.parentNode;
var ul = elements[i].parentNode;
ul.parentNode.removeChild(ul);
var hr = document.createElement("hr");
parent.appendChild(hr);
}
I need to remove 3 classes from a specific <a> that is dynamically built. The only thing that is static is the title. How can I target/find an element by the title? I have googled around but nothing came up that looked like what I was wanting. If this is possible with CSS that would be great but I am expecting a javascript/jQuery answer either work for me.
The tag looks like:
<a href="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3Dj_id0%253Aj_id2%253AtheForm%26lknm%3Dj_id0%253Aj_id2%253AtheForm%253Aj_id77%26lktp%3D%27%20%2B%20getElementByIdCS%28%27j_id0%3Aj_id2%3AtheForm%3Aj_id77_lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27j_id0%3Aj_id2%3AtheForm%3Aj_id77%27%29.value.substring%280%2C%2080%29%29%29" class="col-md-12 col-sm-12 col-xs-12 noPadding" id="j_id0:j_id2:theForm:j_id77_lkwgt" onclick="setLastMousePosition(event)" title="Client Lookup (New Window)">
<img src="/s.gif" alt="Client Lookup (New Window)" class="lookupIcon" onblur="this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" title="Client Lookup (New Window)">
</a>
If you want to select your hyperlink by title with CSS, use such syntax :
a[title='my title']
and the same with jQuery
$("a[title='my title']")
One working jsfiddle : http://jsfiddle.net/hjanto1x/
jQuery is very similar to css selectors. You can target the title like this:
$("a[title=x]")
Let's start from jsFiddle. But I suppose it's should be something like this pseudo code.
$("selector").each("selector").find("attr name").each(function() {
$(this).removeClass();
});
"$(a[title="name"]).event();"
or
"$(a[title="name"]).method();"