jquery 查找容器内的所有匹配元素，包括 iframe 元素

Question

<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')

Answer 1

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());

Answer 2

Consider the following: https://jsfiddle.net/Twisty/hzpvxowc/

JavaScript

$(function() {
  var myElems = $('#container [tabindex], #container a, #container input, #container select, #container button').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/