Given i have a sample page that looks like this:
<!DOCTYPE html>
<html>
<body>
<h1 aria-controls="name1">heading</h1>
<p aria-controls="name2">paragraph</p>
<span aria-controls="name1">span</span>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
How would i use jQuery to select the (2) elements with their aria-controls attribute set to name1? (ignoring the fact that the element types are different).
Thank you!
The attribute selector
[aria-controls="name1"]
should work.
Docs: http://api.jquery.com/attribute-equals-selector/
Use something like this -
WORKING DEMO
var elements = $("body").find("[aria-controls='name1']");
Above is for if you want to look for elements within a container eg body in this case, it can be some div also.
--OR--
var elements = $("[aria-controls='name1']");
Above is for if you want to get all the elements with this attribute
Related
Basically I have a bunch of <h2> tags and without going into detail, I can't manually assign them IDs. So I THINK I could use .innerhtml to somehow get the <h2> text and assign that as IDs for them but I'm not sure how to get started.
Is this even possible?
The html would look something like this:
<body>
<h2>Science</h2>
<h2>History</h2>
<h2>Mathematics</h2>
<script>
</script>
</body>
As the comments have said, you should avoid using innerHTML unless you are sure you want the HTML content of the element - Using innerText instead will make sure you only receive the plaintext
You can use querySelectorAll to get all of the h2 elements in an HTMLCollection
You can then simply loop over this and update the property directly by using:
ele.id = ele.innerText;
Or you can make use of setAttribute like this:
ele.setAttribute('id', ele.innerText);
.
You might also want to use .toLowerCase() after the innerHTML, just to have a more standard ID styling
document.querySelectorAll('h2').forEach((ele) => {
ele.id = ele.innerText;
});
console.log(document.getElementById('History').innerText);
<body>
<h2>Science</h2>
<h2>History</h2>
<h2>Mathematics</h2>
<script>
</script>
</body>
You will want to use the DOM to find all the h2 elements and process accordingly:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Science</h2>
<h2>History</h2>
<h2>Mathematics</h2>
<script>
var h2s = document.querySelectorAll('h2');
h2s.forEach(function(h2Element) {
h2Element.id = h2Element.innerText;
});
</script>
</body>
</html>
Thanks for helping me do the css changes... :)
Now i want to do some changes to the below code. It is the html table code i believe...Using javascript, i want to remove the background color for this table which is white and it also has a border.
Also i want to remove 'onlyluxuryclothing' and 'Designer Clothing' text from the table.
I am posting link to screenshot of the table on how it looks and what i want to do with it,
screenshot
code
Also i have attached link to the code...if you can let me know the javascript to remove the white background, border of the table and the text i mentioned above. Thank you :)
You can use jQuery .remove() function for this:
$('style').remove();
You can do like
$(selector).removeAttr( 'style' );
Try this
var styleTags = document.getElementsByTagName("style");
for (var i=0, max = styleTags .length; i < max; i++) {
styleTags [i].parentNode.removeChild(styleTags [i]);
}
It will remove all style tags
You should put your css in an external file and link it to your html file.
To minimize spacing to your file. (A good coding standard).
Using the <link> tag.
<!DOCTYPE html>
<html>
<head>
<title>Some Title</title>
<!-- Put this inside your head tag in html -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Your html content goes here -->
</body>
</html>
And if you want to remove some styles in your tags, use the JQUERY removeAttr attribute.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").removeAttr("style");
});
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p style="font-size:120%;color:red">This is a paragraph.</p>
<p style="font-weight:bold;color:blue">This is another paragraph.</p>
<button>Remove the style attribute from all p elements</button>
</body>
</html>
Reference Link : removeAttr Link
For my own perspective, it will take so much time by removing all the styles of your tags using JQUERY. If you want to remove all the styles, just remove the link tag element that contains all your css files.
OTHER OPTION or you could use the answers from other developers.
By using jquery
//It will remove the style element.
$("style").remove();
You can do this:
$(document).ready(function(){
$('style').detach();
});
Or this:
$(document).ready(function(){
$('style').remove();
});
Here you have all the info:
For remove
And for Detach
Say if works for you, please :)
u can use this to remove scripts or styles
msg = $('<div>' + msg + '</div>'); msg.find('script, style').remove(); msg = msg.html();
or for any tags
msg.replace(/<script[^>]*?>.*?<\/script>/gi, '').
replace(/<[\/\!]*?[^<>]*?>/gi, '').
replace(/<style[^>]*?>.*?<\/style>/gi, '').
replace(/<![\s\S]*?--[ \t\n\r]*>/gi, '').
replace(/ /g, '');
I was wondering what html tag that suppport id attribute either than <p> tag because i want to change the tag by javascript but i dont want it to be appear in paragraph.
This all what ive been trying
<!DOCTYPE html>
<html>
<body>
Name : <p id="user">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>
but the result is
Name :
Arvin
what I want is
Name : Arvin
thanks for spending your time to read this..any help will much appreciated
Every tag supports id. In your case, <span> would work well.
document.getElementById("user").innerHTML="Arvin";
Name : <span id="user">user1</span>
This code goes wrong because paragraph are shown into a new line (by browser).
This code put text in two lines (without your Javascript)
<html>
<body>
Name : <p id="user">user1</p>
</body>
</html>
You maybe shoud better do this:
<html>
<body>
<p>Name : <span id="user">user1</span></p>
</body>
</html>
document.getElementById("user").innerHTML="Arvin";
See running example here:
I cannot think of any tag that wouldn't support the id attribute, neither can the HTML5 spec:
3.2.5 Global attributes
The following attributes are common to and may be specified on all
HTML elements (even those not defined in this specification): ... id
...
Try adding display: inline style in <p> tag and your problem is solved. You can use id calling on any tag though.
<!DOCTYPE html>
<html>
<body>
Name : <p id="user" style="display:inline;">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>
I want to select all DIVs in my page, including its child iframe.
I have two DIVs here but whenever i try and select them it only grabs the outer one.
<html>
<head></head>
<body>
<div class='xx'>blah</div>
<iframe id='x'>
<html>
<head></head>
<body>
<div class='xx'>blah2</div>
</body>
</html>
</iframe>
</body>
</html>
Is there any way for me to get both DIVs back?
var a = $('.xx');
alert(a.length); //only gives me 1 :(
My fiddle is here :
http://jsfiddle.net/7kvFw/
With only one call this is not possible at all. The iframe is another document so it is not accessable directly. You need to search in all frames seperatly.
By the way your example is not valid. A iframe is just a referece to another document you cannot put the content in the same html document. If you just care about a "box" with the option to scroll inside, just add the another div with the ablity to scroll. This would also allow you to get all .xx elements at once.
See also this fiddle.
When I try the following:
<html>
<body>
<script type="text/javascript">
window.onload = function() {
var test1 = document.getElementsByName("div1");
alert(test1[0]);
var test2 = test1[0].getElementsByName("div2");
alert(test2[0]);
}
</script>
<div name="div1">
<div name="div2">
</div>
</div>
</body>
</html>
It doesn't work the way I intend it to. I made a form and I need to be able to get the form data in a similar manner to what I was testing with this.
getElementsByName should only be called from a document element:
var test2 = document.getElementsByName('div2');
What's more, you really should only use the name attribute for form elements, not divs.
If you want an API that more-easily lets you do searches within a DOM element, consider using jQuery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
var div1 = $('#div1');
var div2 = div1.find('#div2');
});
</script>
</head>
<body>
<div id="div1">
<div id="div2"></div>
</div>
</body>
</html>
Of course, since ids must be unique document-wide, there's usually no reason to search within another element for a specific ID. Therefore, you don't really need anything fancy like jQuery for something that simple.
If I recall correctly, only the document (HTMLDocument) has the getElementsByName method. DOM Elements do not have that method and you cannot apply it by using them as the context.
There is no name in div's attributes. Why not use id instead?