Question

我正在尝试使用javascript点击html元素。我要点击的<span>可以称为id =“tab-1275-closeEl”，但名称中的数字每次关闭并再次创建时都会更改。 Under是围绕元素的html的一部分：

<a id="tab-1275" class="x-tab x-unselectable x-tab-after-title x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-closable x-tab-closable x-tab-default-closable x-closable-top x-tab-closable-top x-tab-default-closable-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active selected"
tabindex="0" unselectable="off" hidefocus="on" role="button" aria-label="Documents" style="right: auto; left: 1px; top: 0px; margin: 0px;" draggable="true" href="javascript:void(0)">
  <span id="tab-1275-btnWrap" class="x-tab-wrap" unselectable="on">
<span id="tab-1275-btnEl" class="x-tab-button">
<span id="tab-1275-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on" style="line-height: normal; padding-top: 2px;" data-qtip="Window-Id: DocAce">
Documents
</span>
  <span id="tab-1275-btnIconEl" class="x-tab-icon-el " style="" unselectable="on" role="img"></span>
  </span>
  </span>
  <span id="tab-1275-closeEl" class="x-tab-close-btn" tabindex="0" title="Close Activity" role="button" aria-label="Close Activity"></span>
</a>

目前我只是设法关闭它，如果我在我的代码中给它一个静态ID：

if (HttpContext.Current != null)
{
  using (Page handler = HttpContext.Current.Handler as Page)
  {
    if (handler != null)
    {
      string script = string.Format((IFormatProvider)CultureInfo.InvariantCulture,
        "<script type=\"text/javascript\">document.getElementById(\"tab-1275-closeEl\").click();</script>");
      handler.ClientScript.RegisterStartupScript(handler.GetType(), "closeOnSave", script);
    }

  }
}

我要点击的元素会一直更改ID，但我无法预测接下来会发生什么。

data-qtip =“Window-Id：DocAce”＆gt;但无论打开或关闭多少次都是独一无二的，它都保持不变，但它在一个不同的元素内（尽管总是在一起）。

<span id="tab-1275-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on" style="line-height: normal; padding-top: 2px;" data-qtip="Window-Id: DocAce">
Documents
</span>

简而言之，我如何在元素内搜索以查看它是否有一个带有值的跨度，然后使用javascript单击同一元素内的不同跨度。

我无法更改页面上已存在的任何html或javascript。

请询问任何不清楚的事情。我已经尝试了一段时间，所以我可能错过了一些东西

Answer 1

因为data-qtip="Window-Id: DocAce"的元素永远不会改变，所以从这个节点开始：

＆＃13;

var jEle = document.querySelectorAll('span[data-qtip="Window-Id: DocAce"]')[0]
           .parentNode.parentNode.nextSibling.nextSibling;

console.log(jEle.outerHTML);

jEle.click()

＆＃13;

<a id="tab-1275"
   class="x-tab x-unselectable x-tab-after-title x-box-item x-tab-default x-noicon x-tab-noicon x-tab-default-noicon x-top x-tab-top x-tab-default-top x-closable x-tab-closable x-tab-default-closable x-closable-top x-tab-closable-top x-tab-default-closable-top x-active x-tab-active x-tab-default-active x-top-active x-tab-top-active x-tab-default-top-active selected"
   tabindex="0" unselectable="off" hidefocus="on" role="button" aria-label="Documents"
   style="right: auto; left: 1px; top: 0px; margin: 0px;" draggable="true" href="javascript:void(0)">
  <span id="tab-1275-btnWrap" class="x-tab-wrap" unselectable="on">
<span id="tab-1275-btnEl" class="x-tab-button">
<span id="tab-1275-btnInnerEl" class="x-tab-inner x-tab-inner-center" unselectable="on"
      style="line-height: normal; padding-top: 2px;" data-qtip="Window-Id: DocAce">
Documents
</span>
  <span id="tab-1275-btnIconEl" class="x-tab-icon-el " style="" unselectable="on" role="img"></span>
  </span>
  </span>
    <span id="tab-1275-closeEl" class="x-tab-close-btn" tabindex="0" title="Close Activity" role="button"
          aria-label="Close Activity"></span>
</a>

＆＃13;

在另一个元素中找到一个html，然后使用Javascript

1 个答案: