如何獲得在重複控制元素ID

Question

這裏是我的問題，我想設置一個元素動態網頁時，系統負載的CSS，所以我用

$(document).ready(function(){ 
    x$("#{id:normalline}").css('margin-Left', '-68px'); 
}); 

是的，我用函數x $（ idTag，param）...我嘗試使用$（「[id $ ='＃{id：normalline}']」）.css，它們都可以在元素不在重複控制時正常工作。一旦元素被包含在重複中，它就不再起作用了。該代碼是在這裏：

updated 

我想你們會注意到重複和另一個函數來獲取元素的id有有一個按鈕，奇怪的是它真的有效！那麼爲什麼當我嘗試初始化時它不工作？我檢查的源代碼，該元件變得

X $（ 「視圖：_id1：repeat1：normalline」）的CSS（ '餘量 - 左'， '-68px'）;

但真正元素的id是

< 'DIV' ID = 「視圖：_id1：repeat1：0：normalline 」類=「 行正常的包裝器」>

，或者如果有有任何其他方式來設置頁面加載時的CSS？

更新：這裏是項目中，我有做的，希望你們不要介意在這裏中國人物

我想要實現這個效果IOS-刪除風格，當其你點擊Minus按鈕，然後Scrollline的div可以移動到左邊的68px，我知道有很多jQuery的東西可以做到這一點，但現在我想集中如何設置normalline的CSS來實現這種方式.. 。

<xp:repeat id="repeat1" rows="30" var="currentDetail" 
     indexVar="detailIndex" value="#{LeaveBean.details}" 
     repeatControls="false"> 

     <xp:div styleClass="line-wrapper"> 
      <xp:div id="scrollline" 
       styleClass="line-scroll-wrapper"> 
       <xp:div id="normalline" 
        styleClass="line-normal-wrapper"> 
        <xp:div 
         style="width:26px;margin-top:50px;margin-left:10px;float:left;"> 
         <xp:image url="/remicon.gif" id="image2" 
          style="height:24.0px;width:24.0px"> 
          <xp:eventHandler event="onclick" 
           submit="false" id="eventHandler5"> 
           <xp:this.script> 
            <xp:executeClientScript> 
             <xp:this.script><![CDATA[x$("#{id:scrollline}").css('margin-Left', '-68px'); 
             ]]></xp:this.script> 
            </xp:executeClientScript> 
           </xp:this.script> 
          </xp:eventHandler> 
         </xp:image> 
        </xp:div> 
       </xp:div> 
       <xp:div id="deletebtn" 
        styleClass="line-btn-delete"> 
        <xp:button value="刪除" id="button2" 
         style="font-size:13pt;border: none;color:rgb(255,255,255);width:100%;height:128px;background-color:rgb(255,0,0)"> 
         <xp:eventHandler event="onclick" 
          submit="false" refreshMode="partial" refreshId="repeat1"> 
          <xp:this.action> 
           <![CDATA[#{javascript:LeaveBean.removeDetail(detailIndex);}]]> 
          </xp:this.action> 
         </xp:eventHandler> 
        </xp:button> 
       </xp:div> 
      </xp:div> 
     </xp:div> 
    </xp:repeat> 

這裏是css樣式文件

.line-wrapper {width：100％;溢出：隱藏; border-bottom：1px solid＃E8E8E9}

.line-scroll-wrapper {white-space：nowrap; clear：both}

.line-normal-wrapper {display：inline-block; line-height：100px;向左飄浮;填充底：1px的;邊距：5px的}

.line區段-BTN-刪除{寬度：68px;高度：120像素}

到目前爲止，我在.line區段正常設置寬度值-wrapper保持刪除按鈕沒有出現在頁面上，一旦我刪除它，它就會像這樣的：

，但我不能修復正常div的寬度，因爲我可以」即使在同一臺設備上，也可以控制所有設備的屏幕尺寸，如果您旋轉屏幕，因爲normalline的寬度是固定的，將會很糟糕。

我嘗試添加此功能來設置寬度

<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[ 
    $(document).ready(function(){$(".line-normal-wrapper").width($(window).width());}); 
    ]]></xp:this.value> 
</xp:scriptBlock> 

但是，它只能工作在頁面打開，一旦我添加新行或刪除一個，它將成爲PIC 2看

所以，我現在該怎麼辦...... = =

再次更新.... ewhh .....我覺得如果我刪除就緒功能...它工程...> ___ <

<xp:scriptBlock id="scriptBlock1"> 
    <xp:this.value><![CDATA[ 
    $(".line-normal-wrapper").width($(window).width()); 
    ]]></xp:this.value> 
</xp:scriptBlock> 

Answer 1

Taplar的回答是從一個jQuery的點正確，有一個句法問題，以防止使用的XPages的ID（它必須包括一個分層的元件，採用了結腸，實現爲了以確保客戶端的唯一ID，如你所見）。

但是，在這裏有一個特定的XPages原因影響你，這不是ID，而是重複。這將阻止您通過SSJS以及jQuery CSJS從外部訪問重複行。

XPages #{id:...}語法用於訪問服務器端組件。但是在重複控制中，對於每行都沒有一組組件，您只有一組組件不會綁定到任何行。我在今年的幾次會議上已經介紹了這一點，並將在下週的TLCC網絡研討會上再次報道。您可以使用XPages調試工具欄的Inspector選項卡來查看XPage的組件樹，XPage使用的頁面的服務器端地圖。你只會看到一組組件。如果您設置重複的indexVar屬性並在ID中使用該屬性，則會看到該ID不包含該屬性，因爲它沒有爲特定行加載一組組件，而是一組抽象的獨立組件重複。因此，#{id:...}語法將映射到抽象模板組件，而不映射到特定行中的特定實例。

在組件上使用CSS樣式是推薦的方法。

另外，如果您的重複控制設置repeatControls="true"，一組X行重複的組件將被創建，並且可以設置ID，包括重複控制的indexVar屬性，讓您的訪問他們從外面。但這並不是推薦的方法，因爲您需要知道創建了多少行，並且您將無法使用分頁器動態更改每組組件綁定到的行 - 這僅在頁面加載時設置。

Answer 2

這裏的問題是你的ID有像它:字符，具有特殊意義的CSS選擇器，它的jQuery模仿在它的選擇邏輯。你可以用各種方式來定位這樣一個元素。

//personally i would avoid this one as it will do a dom scan 
 
console.log($('[id="view:_id1:repeat1:0:normalline"]').get()); 
 

 
console.log($('div').filter(function(){ return this.id === "view:_id1:repeat1:0:normalline"; }).get()); 
 

 
//I would probably do this one or the one above if I was forced to. 
 
console.log($(document.getElementById('view:_id1:repeat1:0:normalline')).get());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="view:_id1:repeat1:0:normalline" class="line-normal-wrapper"></div>