<div id="container">
<div tabindex="0">Tabbable content 1</div>
<div>Non Tabbable content 2</div>
<button type="submit">Submit</button>
<label>First Name: <input type="text" /></label>
<iframe height="600" width="600" src="iframe.html"></iframe>
</div>
Iframe.html
<label>Last Name: <input type="text" /></label>
<div tabindex="0">Tabbable content inside iframe</div>
I want to find all the elements matching this selector inside a container [tabindex="0"],a,input,select,button.
Expected output: Tabbable Content 1, button, First Name input, last name input, Tabbable content inside iframe elements should be returned.
I tried $('[tabindex="0"],a,input,select,button', $('#container')), document.querySelector('#container').querySelectorAll('[tabindex="0"],a,input,select,button')
Consider the following: https://jsfiddle.net/Twisty/hzpvxowc/
JavaScript
$(function() {
var myElems = $('[tabindex], a, input, select, button', "#container").add($('[tabindex], a, input, select, button', $("iframe").contents()));
console.log(myElems.length);
});
This shows 5 in the console, which is what is expected.
See More: https://api.jquery.com/add/
If you want to select element from iframe, first you should select iframe contents and then find target element inside frame's content. For example imagine we have an iframe with id frm1 and we want to select all the inputs in frame:
$("#frm1").contents().find("input");
or
let iframe= $("#frm1");
$('input', iframe.contents());