獲取數組中的圖像標籤的索引號

-1

我有一個數組，我試圖用javascript編寫一個函數來返回數組中的圖像標籤的索引。其中img和p是我的代碼中的標籤都共享相同的類。獲取數組中的圖像標籤的索引號

const getClass = document.querySelectorAll('.grp1') 
const intoArray = Array.from(getClass) 
console.log(intoArray) ====> [img.headPic.grp1,p.grp1,p.grp1]

我一直在使用indexOf('img')嘗試，但它返回-1，這意味着在陣列，它無法找到它。

來源

2017-02-28 keigwin

你數組項是 'img.headPic.grp1' 不是IMG。嘗試indexOf（'img.headPic.grp1'）。 –

您正在向indexOf傳遞一個字符串，但您想傳遞變量'img'。使用'indexOf（img）'而不是 – baao

indexOf（'img.headPic.grp1'）只適用於特定的值和類型。請說明該值是否隨意更改以及該類型是否總是一個字符串，或者它是一個對象還是什麼？ – atomCode

您可以迭代數組並檢查每個元素的節點名稱。例如。

var index = -1; 
for (var i = 0; i < intoArray.length; i++) { 
    if (intoArray[i].nodeName === 'IMG') { 
    index = i; 
    break; 
    } 
}

有各種各樣的方式迭代數組並獲取您想要的數據。如果Array#findIndex可用，然後使用來代替：

var index = intoArray.findIndex(function(element) { return element.nodeName === 'IMG'; });

您還可以直接查詢的元素，並使用indexOf：

var img = document.querySelector('img.grp1'); 
var index = Array.from(document.querySelectorAll('.grp1')).indexOf(img);

來源

2017-02-28 21:40:55

您目前正在尋找一個字符串，而不是一個實例。 .indexOf('img')無法工作，因爲您正在查找字符串"img"而不是實際的圖像元素。你需要先通過類似的方式查詢它document.querySelector('.headPic')

如果你構成圖像實例，你的確可以通過indexOf的數組搜索實例。 只有當數組實際上是一個數組時！

大多數文檔查詢函數（document.getElementsByName，document.querySelectorAll等）返回所謂的NodeList。大部分類似數組的功能都是在那種類型的對象（比如循環）上實現的，但不是全部。爲了能夠使用indexOf（filter，forEach，map），您必須確保該對象首先轉換爲數組。

大衛沃爾什細節如何如此here。

var nodesArray = Array.prototype.slice.call(document.querySelectorAll("div")) 
代碼的結果是上述包含所有由QSA返回的節點的真實Array對象。你甚至可以使代碼更短，與此替代：
var nodesArray = [].slice.call(document.querySelectorAll("div")); 

var el = document.querySelectorAll('.grp1'); 
 
var img = document.querySelector('.headPic'); 
 
// el.indexOf(img); 
 
// this can't work right now because the object is still a NodeList at that point 
 
var el_array = Array.prototype.slice.call(el); 
 
var num = document.querySelector('.numIndex'); 
 

 
num.innerHTML = el_array.indexOf(img);

<p class="grp1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi.</p> 
 
<p class="grp1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi.</p> 
 
<img class="headPic grp1" src="http://placehold.it/200/300"> 
 
<p class="grp1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus animi.</p> 
 
<p>Index of the image is <span class="numIndex"></span></p>

來源

2017-02-28 21:41:35

OP已經將列表轉換爲數組。查看他們的最新更新。 –

獲取數組中的圖像標籤的索引號

回答

相關問題