jquery find all the matching elements inside a container including the iframe elements-CodePudding

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

CodePudding user response：

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

let iframe= $("#frm1");
$('input', iframe.contents());

CodePudding user response：

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/