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");
Related
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]');
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.
In the HTML I have the following element:
HTML
<input id="userNameTxt" type="text" class="input" value='ABC>
And i am selecting it like this in jQuery:
APP.js
$(userNameTxt).val()
What is this selector selecting? (Like when I use $('.something') -> it's selecting the Class of the element or $('#something') it's selecting the ID.)
It seems to be selecting the ID, but then is it similar to the # selector? If so then when to use such selector?
It is because the browser feature which will create global variables with element id properties.
If you use console.log(userNameTxt) you will be able to see the element get logged, so in your case you are passing a dom element reference to jQuery which is a valid param.
console.log(userNameTxt);
console.log(somename);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="userNameTxt" type="text" class="input" value='ABC' />
<div id="somename"></div>
HTML Standard
DOM Element References as Global Variables
Do DOM tree elements with ids become global variables?
I am trying to select an element with a id which has suffix as "_pan1" and it should has class name as oleDiv1 from below code.
<div id="44_div_pan1" class="oleDiv1">
<div id="45_div_pan1" class="oleDiv2">
<div id="47_div_pan1" class="oleDiv1">
<div id="48_div_pan2" class="oleDiv4">
I can get elements using the suffix form ID name using below code
$("*[id$='_pan1']")
but i can not get the combinatined element which has the class oleDiv1
This code is not working $("*[id$='_pan1' .oleDiv1]") .
Please help me to correct the mistakes in my above code.
Thanks
Just combine the selectors without any space between them.
$('[id$=_pan].oleDiv1');
Try this
console.log($("*[id$='_pan1'].oleDiv1"));
Example
You need to use attribute ends with selector:
$('[id$="_pan1"].oleDiv1')
So I have a div that is drawing in dynamic elements at its bottom and I want to hide these elements, no matter what their IDs are using javaScript/jQuery. Basically my HTML looks like this:
<div class="right-panel">
<div class="info">Text</div>
<form id="the-form">
<input type="hidden" name="first-name" value="">
<input type="hidden" name="last-name" value="">
<input type="hidden" name="state" value="">
</form>
<script>javaScript</script>
<div id="dynamic-id-1">Advertisement 1</div>
<div id="dynamic-id-2">Advertisement 2</div>
</div>
I'd like to ensure that the "dynamic-id-1" and "dynamic-id-2" divs are always removed or hidden no matter what their ID's are (their IDs are subject to change). How do I target these elements without targeting their IDs?
Edit--I tried this, but my approach seems limited, and I couldn't get it to work with multiple divs, even when chaining:
$('#the-form').next().hide();
(Note: unfortunately they don't have a class, there are multiple divs, and the IDs are always completely different. I was hoping there might be novel way to target the last two divs of the wrapping div and hide them)
If the script tag is always before the div's that need removing you could do this -
$('.right-panel > script').nextAll('div').remove();
http://jsfiddle.net/w6d8K/1/
Based on what you tried you could do this -
$('#the-form').nextAll('div').hide();
http://jsfiddle.net/w6d8K/2/
Here are the docs for nextAll() - https://api.jquery.com/nextAll/
The simplest route would be to add classes to the dynamic elements. Something like:
<div class="removable-element" id="dynamic-id-1">Advertisement 1</div>
Then, you can do something like:
$(".right-panel .removable-element").remove()
If only one div at a time is generated dynamically. Add this to dynamic generation:
$('#the-form + div').hide();
Another method to achieve the same (not preferred) is:
$('#the-form').next('div').remove();
You are saying you don't want to target their "id", but is there some specific part in the id that will remain the same ?
like for instance "dynamic-id-" ?
If this is the case you can target them by using a "like selector". The code below would target all divs whose ID is starting with "dynamic-id"
$('div[id^=dynamic-id]').each(function () {
//do something here
});
Target the class instead of the dynamic ID.
<div class="element-to-remove" id="dynamic-id-1" />
<div class="element-to-remove" id="dynamic-id-2" />
$('.right-panel . element-to-remove').remove();