別の要素の中にhtmlを見つけて、それをJavaScriptでクリックしてください。

Question

javascriptでhtml要素をクリックしようとしています。 <span>私がクリックしたいのは、id = "tab-1275-closeEl"と呼ぶことができますが、閉じられて再び作成されるたびに名前の番号が変わります。

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を与える場合は、それを閉じることができた瞬間に

<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>

：下の要素を囲むHTMLの一部であります

私がクリックしたい要素は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> 

、どのように私はそれが価値を持つ1つのスパンを持っているかどうかを確認するために要素内検索し、JavaScriptを使用して同じ要素内だ別のスパンをクリックすることができます。

ページに既に存在するhtmlまたはjavascriptを変更することはできません。

不明な点は質問してください。 data-qtip="Window-Id: DocAce"であなたの要素が変化したことがないので、私は何か

Answer 1

を見逃している可能性がありますので、私はあなたがこのノードから右スタート、しばらくの間しようとしてきた：

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>