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>

我想在容器[tabindex="0"],a,input,select,button中找到與此選擇器匹配的所有元素。

預期的 output： 應返回Tabbable Content 1 、 button 、 First Name input 、 last name input 、 Tabbable content inside iframe的 Tabbable 內容。

我試過 $('[tabindex="0"],a,input,select,button', $('#container')), document.querySelector('#container').querySelectorAll('[tabindex="0" ],a,輸入,select,按鈕')

Answer 1

如果你想從 iframe 中找到 select 元素，首先你應該 select ZA598E4F2AFAD9DF861FDC476F6 里面的內容和目標元素。 例如，假設我們有一個 ID 為 frm1 的iframe ，我們想要 select 幀中的所有輸入：

$("#frm1").contents().find("input");

或者

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

Answer 2

考慮以下問題： 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);
});

這在控制台中顯示5 ，這是預期的結果。

查看更多： https://api.jquery.com/add/