2016-09-14 48 views
0

我正在嘗試使用javascript對html元素進行單擊。我想點擊的<span>可以被稱爲id =「tab-1275-closeEl」,但是每次關閉並重新創建時,名稱中的數字都會發生變化。下週圍的元素的HTML的一部分:找到另一個元素內的html,然後用Javascript進行單擊它

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

總之,我怎麼可以搜索一個元素裏面看它是否有一個跨度值,然後點擊不同的跨度是用JavaScript相同的元素裏面。

我無法更改頁面上已有的任何html或javascript。

請查詢任何不清楚的東西。我一直在嘗試了一段時間,所以我可能錯過了一些東西

回答

1

因爲與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>

相關問題