[英]Using Javascript to select nested element
如何選擇嵌套元素
例如
我們有這樣的事情(這是列表頁上看起來LinkedIn搜索人員時等)
<li class="page-list">
<ol>
<li class="active">1</li>
<li><button data-ember-action="" data-ember-action-6289="6289" data-is-animating-click="true">2</button></li>
<li><button data-ember-action="" data-ember-action-6291="6291">3</button></li>
<li><button data-ember-action="" data-ember-action-6293="6293">4</button></li>
<li><button data-ember-action="" data-ember-action-6295="6295">5</button></li>
<li><button data-ember-action="" data-ember-action-6297="6297">6</button></li>
<li><button data-ember-action="" data-ember-action-6299="6299">7</button></li>
<li><button data-ember-action="" data-ember-action-6301="6301">8</button></li>
<li><button data-ember-action="" data-ember-action-6303="6303">9</button></li>
<li><button data-ember-action="" data-ember-action-6305="6305">10</button></li>
</ol>
</li>
現在,就像這樣,頁面上有多個li元素,但只有一個元素帶有<li class="page-list">
現在,從這個li我想點擊/選擇這個
<button data-ember-action="" data-ember-action-6291="6291">3</button>
它進一步嵌套在<li>
[問題]有人可以幫助我,告訴我如何選擇/點擊這個? 另外我不能使用data-ember-action
因為在data-ember-action-6289中,6289不是固定的和隨機的(對於不同的搜索可能不同),因此當我創建一個腳本來執行操作時,它不會了解data-ember-action中的數字。
一個簡單的querySelector
會這樣做:
console.log(document.querySelector('[data-ember-action-6291="6291"]'))
<li class="page-list"> <ol> <li class="active">1</li> <li><button data-ember-action="" data-ember-action-6289="6289" data-is-animating-click="true">2</button></li> <li><button data-ember-action="" data-ember-action-6291="6291">3</button></li> <li><button data-ember-action="" data-ember-action-6293="6293">4</button></li> <li><button data-ember-action="" data-ember-action-6295="6295">5</button></li> <li><button data-ember-action="" data-ember-action-6297="6297">6</button></li> <li><button data-ember-action="" data-ember-action-6299="6299">7</button></li> <li><button data-ember-action="" data-ember-action-6301="6301">8</button></li> <li><button data-ember-action="" data-ember-action-6303="6303">9</button></li> <li><button data-ember-action="" data-ember-action-6305="6305">10</button></li> </ol> </li>
如果您不能指望data-
屬性,那么只需選擇ol
的第三個子項:
console.log( document.querySelector('.page-list li:nth-child(3)') );
<li class="page-list"> <ol> <li class="active">1</li> <li><button data-ember-action="" data-ember-action-6289="6289" data-is-animating-click="true">2</button></li> <li><button data-ember-action="" data-ember-action-6291="6291">3</button></li> <li><button data-ember-action="" data-ember-action-6293="6293">4</button></li> <li><button data-ember-action="" data-ember-action-6295="6295">5</button></li> <li><button data-ember-action="" data-ember-action-6297="6297">6</button></li> <li><button data-ember-action="" data-ember-action-6299="6299">7</button></li> <li><button data-ember-action="" data-ember-action-6301="6301">8</button></li> <li><button data-ember-action="" data-ember-action-6303="6303">9</button></li> <li><button data-ember-action="" data-ember-action-6305="6305">10</button></li> </ol> </li>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.