在另一个元素中找到一个html，然后用Javascript单击它

本文关键字：html 一个 然后 单击 Javascript 元素 另一个 | 更新日期: 2023-09-27 18:06:56

我试图用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">无论打开或关闭多少次，它都保持不变，并且是唯一的，但它在不同的元素中(尽管总是在一起)。

<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的值，然后点击不同的span，在同一元素与javascript。

我不能改变任何html或javascript已经存在的页面。

有不清楚的地方请问。我已经尝试了一段时间，所以我可能错过了一些

在另一个元素中找到一个html，然后用Javascript单击它

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

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

相关文章：