CODEWITHSUNDEEP
javascripthtmljqueryiframe
code gig
code gig

Reputation: 67

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

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

Upvotes: 1

Views: 382

Answers (2)

Twisty
Twisty

Reputation: 30893

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/

Upvotes: 1

Saeed Shamloo
Saeed Shamloo

Reputation: 6564

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

Upvotes: 0

Related Questions