有若干个classname相同的元素，怎样通过js获得被点击的元素是第几个元素

Posted 2023-04-18

<div><img class=pic></div>
<div><img class=pic></div>
<div><img class=pic></div>
<div><img class=pic></div>
怎样通过点击img获得被点击的div是第几个？

参考技术A 不能获取到，除非给每个元素都加上一个标识，标识当前元素是第几个追问

加标识是怎么做呢？

追答 window.onload = function()
   var imgs = getElementByClassName("pic");
   for(var i=0;i<imgs.length;i++)
   imgs[i].parentNode.onclick = (function(i)
   return function()
   alert(i)
   
   )(i)
   
   
   
    function getElementByClassName(className)
   var elems = [];
   if(!document.getElementsByClassName)
   alert("no exit");
   var dom = document.getElementByTagName('*');
   for(var i = 0;i<dom.length;i++)
   if(dom[i].className == className)
elems.push(dom[i]);
   
else
elems = document.getElementsByClassName(className);

return elems;
   

用闭包吧本回答被提问者采纳

我如何通过 className 单击此元素，因为我将它用于具有相同类名的多个屏幕

【中文标题】我如何通过 className 单击此元素，因为我将它用于具有相同类名的多个屏幕

【英文标题】：How do i click this element via className since i will be using it for multiple screens with same class name

【发布时间】：2020-11-10 08:55:52

【问题描述】：

我得到的元素是<div class="x-tool x-box-item" id="tool-123" src="data:image/gif;base64" class="new-img x-tool-maximize".

我特别需要这个class="new-img x-tool-maximize"，因为它是所有屏幕的共同点。

我已经试过了

driver.findElement(By.className("new-img.x-tool-maximize")).click()

和

driver.findElement(By.className("new-img x-tool-maximize")).click();

和

driver.findElement(By.xpath("//div[contains(@class, 'value') and contains(@class, 'test')]"))``;

【问题讨论】：

为什么div包含两个类属性？ class="x-tool x-box-item" 和 class="new-img x-tool-maximize"? AFAIK By.className 只接受一个类名

【参考方案1】：

您应该能够使用 CSS 选择器来查找这种类型的元素。你会想要像driver.findElement(By.cssSelector("div.new-img.x-tool-maximize")) 这样的东西。

【参考方案2】：

You can use list in selenium if you have multiple elements with same locators 

  

     List<WebElement> classes=driver.findElements(By.classname("new-img x-tool-maximize));
// if you want click 1 st class name element use this following line 
     classes.get(0).click();

OR  // if you want click 2 nd  class name element use this following line 
     classes.get(1).click();

【讨论】：

这行不通。 By.className 将抛出异常，因为参数包含多个类名，因为类名在 HTML 中由空格分隔。

你能分享这个网址吗？

【参考方案3】：

使用列表获取所有具有特定类的 WebElements

 List<WebElement> list = driver.findElements(By.cssSelector("div.new-img.x-tool-maximize"));

【参考方案4】：

当您打算仅使用className 属性值对元素进行click() 时，理想情况下，您需要为elementToBeClickable() 引入WebDriverWait，并且您可以使用以下Locator Strategies 之一：

cssSelector 仅使用 className 属性值：

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector(".new-img.x-tool-maximize"))).click();

对于更规范的方法，您可以包含 tagName，如下所示：

cssSelector:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("div.new-img.x-tool-maximize]"))).click();

---

参考文献

您可以在以下位置找到一些相关的详细讨论：

Unable to locate element using className in Selenium and Java How to locate the last web element using classname attribute through Selenium and Python What are properties of find_element_by_class_name in selenium python?