I know I can select all the HTML elements with a custom attribute by just doing:
$('p[mytag]')
As you can see, I also need to specify the actual HTML div type (a p element in this case). But what if I need to retrieve all the HTML elements irrespective of their type?
Consider this code:
<p>11111111111111</p>
<p mytag="nina">2222222222</p>
<div>33333333333</div>
<div mytag="sara">4444444444</div>
how I can select the 2 html elements (the p and the div) with custom attribute mytag?
You just need to use $("[mytag]")
console.log($("[mytag]"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>11111111111111</p>
<p mytag="nina">2222222222</p>
<div>33333333333</div>
<div mytag="sara">4444444444</div>
Use querySelectorAll (javascript) :
document.querySelectorAll('[mytag]');
Or even simpler with jQuery:
$('[mytag]');
Related
If I have this:
<div class="abc">
<input class="edf">
</div>
Does the input tag inherits the class="abc"? So the input tag is actually <input class="edf abc">?
If it does, can I use jquery to pick up the class="abc" from the input tag by using class="edf"?
I am trying to do some event to the input tag and I am trying to only pick up the input tag by using the class name class="edf" due to design limitation.
No, the <input> element does not inherit the class(es) of parent elements. However, the selector
.abc .edf
will match that <input>. So, via jQuery,
var $input = $(".abc input.edf");
would match your input, but not match:
<div id="someOtherDiv" class="xyz">
<input class="edf">
</div>
No, classes are not being inherited by DOM elements. You have to add them explicitly.
No it does not inherit class like you think it is, that being sad it is a child of a parent.
You can select a class edf like such $(".abc .adf") or you can select abc from edf by doing this $(".edf").parent() or $(".edf").parents(".abc");
Is there a way to extract body element without a particular child element in it?
For example, if I have:
<body>
<div id="id1" class="class1" />
<div id="id2" class="class2" />
</body>
, what I need to be extracted is:
<body>
<div id="id1" class="class1" />
</body>
Actually, I intend to use html2canvas library to make canvas element from a HTML code, but I don't want to include all body children in a canvas element.
If you retrieve a parent element then you also have to take all of its children too. A possible workaround in this case would be to select the body, clone it and then remove the unwanted child element, something like this:
var $bodyClone = $('body').clone();
$bodyClone.find('#id2').remove();
// use $bodyClone as needed here...
$('body').not("#id2").html();
or
$('body').not(".class2").html();
and this is for multiple
$( "div" ).not( ".someclass, #someid,.class").html()
hope it will help
you can use document.getElementById(id) to get one element
or getElementsByClassName(class) and then filter the returned array
Using better ids or classes could help you to avoid filtering at all, simply give all your canvases one class and replace them all.
I need to get the object of second level html element in my page.
<html>
<div id="out">
jasoidjisa
<html>
<head>//This object
<div id="in">
hihisdhi
</div>
</head>
</html>
</div>
<script>
alert(document.getElementsByTagName('html'));
</script>
Help me to access this html element via js
HTML is a reserved tag name and so you can't use it in the manner in which you have used it here. Which particular value from above are you trying to get exactly ? It might make sense to use the <div> tag with a class or I'd to identify it instead. If you specify which value you are specifically looking to get I can write up a theoretical solution.
vsank7787 was totally correct. Maybe you could use iFrames instead of nested html inside a HTML document since html is a reserved keyword.
<div id="placeholdSlots">
<div sort-helper="1"></div>
</div>
How select the div using sort-helper custom attr? I know attr('sort-helper') can only get the value.
$('div[sort-helper]');
or in vanillaJS
document.querySelectorAll('div[sort-helper]');
Anyway I would suggest to use a data-* attribute instead, e.g.
<div data-sort-helper="1"></div>
use jQuery attribute selector
alert($('div[sort-helper="1"]').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="placeholdSlots">
<div sort-helper="1">abc</div>
</div>
jQuery is not the only way. You can use direct Javascript, like this:
Retrieving the firt div with an attribute called sort-helper
var elem = document.querySelector("[sort-helper]");
Retrieving all divs with an attribute called sort-helper
var list = document.querySelectorAll("[sort-helper]");
This is faster that jQuery because it is native code. And it is now cross-browser (for modern browsers ;-)).
I have an element (for example, a body) nested somewhere inside a div.. Something like:
<div class=wrapper>
..
..
<body>
</body>
</div>
How would I go about selecting the body with jQuery?
As others have said - this doesn't look like valid HTML - I'm going to assume that you just gave that as an example as this technique can be used to find any type of element.
This should do the trick to locate the body tag -
$('div.wrapper').find('body')
When you don't specify in your selector that you are talking about a class . or id # attribute - the whole string will be matched to the type of element.
The same could be done for -
<img> tags -
$('div.wrapper').find('img')
<a> tags -
$('div.wrapper').find('a')
<span> tags -
$('div.wrapper').find('span')
etc...
Your HTML Markup is off, first of all.
<body>
<div class="wrapper">
<div class="body">
..
..
</div>
</div>
</body>
Select it with $('div.wrapper div.body')
Thanks to ClarkeyBoy for pointing out my mistakes, fixed my post.
It doesn't look like valid HTML, but try this:
$('div.wrapper body')
Surely that HTML isn't correct to have a body tag within a div? Unless it's inside an iframe?
However you could use this to select the body tag...
jQuery("div.wrapper body").whatever();