I'd like to check which of the elements in a set returned by jQuery is the event.target element.
Is this possible?
Yes. I assume by "...which of the elements..." you mean the index of the element within the set. If you have the set in set, then index(element) will give you the index (0, 1, etc.) or -1 if it isn't in the set at all:
var index = set.index(event.target);
Of course, if you just want to do something with the element, you don't need the set at all. Just use $(event.target) to get a new set containing that element.
Related
I try to identify the color of a specific element on a position (sometimes its inside an Iframe)
var el = document.elementFromPoint(1000, 10);
if (el instanceof HTMLIFrameElement)
el = el.contentWindow.document.elementFromPoint(1000, 10);
el returns:
<div class="container-fluid"</div>
This element itself has no styling, so el.style.backgroundColor gives me ""
The element which contains the information about the styling is the parent div, but since the website is dynamic, this is also not always the case.
Is there a workaround or shortcut to get receive the color of the current position on the body for example?
Something like document.getColorFromPoint(1000, 10) which would return a hex code or rgba value?
Thank you for any suggestions
window.getComputedStyles is what you want to use since el.style property return only inline styles applied to the element.
I would approach it this way:
Find the current element with elementFromPoint method
Get the background with window.getComputedStyle(element)["backgroundColor"]
If it returns empty string for current element, call the same method on its parent window.getComputedStyle(element)["backgroundColor"]
Run this until you get the background color!
I'm trying to select element by data attribute defined with jquery (it's not visible in DOM), therefore I cannot use $('.foo:data(id)')
example: if user clicks element I add data property to it as following
$(this).data('id', '1');
now I would like to find element which has
data-id == 1
how can I select this element by data-id?
Use filter()
$('.foo').filter(function(){
return $(this).data('id') === `1`
}).doSomething()
You could use the attribute selector [attribute=...].
In your case, this would be
$('[data-id=1]')
But keep in mind, if you change the data of an element with .data(), the change isn't reflected in the dom attribute, so you can't use this (or additionally change the dom attribute).
The other way would be to select every candidate and then filter for each element, which has a matching data value.
$('.foo').filter(function(){
return $(this).data('id') == 1;
});
I am trying to figure out if there is a way (without using any loops like each etc..) to look up element that has specific value, something like
var myElment = $('.container');
var child = $('.container-child');
myElement.find(child /* That has value of test */);
value is related to .val() of child element, so text inside it.
By the Attribute Equals Selector which is [attr=value].
So, to do that, just use
$(".container .container-child[value='test']")
I didn't find a way to get aria-expanded value from DOM.
<a class="accordion-toggle collapsed" href="#collapse-One" data-parent="#accordion-1" data-toggle="collapse" aria-expanded="false">
<i class="fa fa-search-plus"></i>
test
</a>
I want to test if it's true then I can change <i> class to fa-search-minus. I tried this but I always get an undefined value:
console.log($(this).find('a.aria-expanded').val());
I wanted to add in a second pure javascript way to get the aria-expanded attribute
document.getElementById('test').getAttribute('aria-expanded')
The above will get the element by id after that you can get any attribute by name.
aria-expanded is an attribute on the element, not a class, so the selector is incorrect. Secondly, you should use the attr() function to get the value of that attribute. val() is intended to retrieve the value attribute from form related elements, such as input and textarea. Try this:
console.log($(this).find('a[aria-expanded]').attr('aria-expanded'));
You can use JavaScript to achieve this:
document.getElementsByTagName('a')[0].attributes[4].value
Step by step explanation:
Get the wanted element, by using some selector - here I use the
document.getElementsByTagName('a')[0]
but you can use any other selector you like.
Access the attributes array of the element and find the position of the wanted attribute - in this case that will be 4, because aria-expanded is the 5th attribute of the tag.
From there you just get the value, and that should give you "false" (in this case).
The only problem with this method is that it's a bit hard-coded, so if you add some more attributes to the tag, the position in the attributes array for the aria-expanded attribute might change.
UPDATE
Instead of using the index for accessing the Aria Expanded property, you can use the name:
document.getElementsByTagName('a')[0].attributes['aria-expanded'].value
This way you will always get the value for the Area Expanded property, regardless of it's position in the HTML tag.
Update 02/2023:
ariaExpanded property still does not work on Firefox. It will be undefined.
Another way to get aria values is to reference the properties directly:
For your instance, you could do something like this:
let firstAnchorTag = document.getElementsByTagName('a')[0]; // I don't know your situation but I recommend adding an id to this element, or making this an iterable array.
console.log(firstAnchorTag.ariaExpanded); // Should log 'false' for your example.
To get:
let el = document.getElementById('foobar');
console.log(el.ariaExpanded); // Should log the current value of aria-expanded.
To set:
let el = document.getElementById('foobar');
el.ariaExpanded = 'true';
console.log(el.ariaExpanded); // Should log 'true'.
Reference: Element.ariaExpanded MDN
In 2020, I could do:
document.querySelector('[aria-expanded]')?.getAttribute('aria-expanded')
to grab the first value and maybe something like:
Array.from(document.querySelectorAll('[aria-expanded]'))?
.map(el => el.getAttribute('aria-expanded'))
to make an array of all aria-expanded values.
attr() function is used to get value of attribute whereas val() is used to retrieve the value attribute from form the related elements, i.e. textbox,input etc. Also aria-expanded is an attribute not a class so you are using incorrect selector.
So you should use attr() instead of val().
Use this:
console.log($(this).find('a[aria-expanded]').attr('aria-expanded'))
You can get the element by the class name "accordion-toggle" (if you have it just one time), or better add an ID to the element, and then get the attribute.
$('.accordion-toggle').attr('aria-expanded')
Or
$('#id-name').attr('aria-expanded')
Given the following code
var a = $('<div><div></div></div>');
a.css("visibility", "visible");
a.find("* :visible");
I receive an empty array [] as a result instead of a div. What am I doing wrong?
To check if an element is visible, it must be inserted into the DOM. You also don't need the * selector. Try this:
var a = $('<div><div></div></div>'); // create an element
a.css("visibility", "visible");
$("BODY").append(a) // Add the element to the DOM first
a.find(":visible")
alert(a.find(":visible").length); // displays '1'
You haven't added the element to the page, so it's not sized yet. Elements with zero size are not considered visible.