Jquery 如何在repeat控件中获取元素id_Jquery_Css_Xpages

Jquery 如何在repeat控件中获取元素id

jquery css xpages

Jquery 如何在repeat控件中获取元素id,jquery,css,xpages,Jquery,Css,Xpages,这里是我的问题，我想在网页加载时动态设置元素的css，所以我使用了 $(document).ready(function(){ x$("#{id:normalline}").css('margin-Left', '-68px'); }); 是的，我使用了函数x$（idTag，param）…我尝试使用$（“[id$=”{id:normalline}]]）。css或者，当元素不在repeat控件中时，它们都可以正常工作..但是…一旦元素包含在repeat中，它就不再工作了。代码如下： u

这里是我的问题，我想在网页加载时动态设置元素的css，所以我使用了

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

是的，我使用了函数x$（idTag，param）…我尝试使用$（“[id$=”{id:normalline}]]）。css或者，当元素不在repeat控件中时，它们都可以正常工作..但是…一旦元素包含在repeat中，它就不再工作了。代码如下：

updated

我想你们会注意到在repeat中有一个按钮和另一个获取元素id的函数，奇怪的是它真的可以工作！那么，为什么在我尝试初始化它时它不起作用呢？我检查了源代码，元素变为

x$（“视图：_id1:repeat1:normalline”）.css（'margin-Left'，'-68px'）

但真正的元素id是

或者，当页面加载时，是否有其他方法来设置css

更新：这是我正在做的项目，希望你们不要介意这里的汉字

我想以ios删除风格来实现这个效果，当你点击减号按钮时，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样式文件

.linewrapper{宽度：100%；溢出：隐藏；边框底部：1px实心#E8E8E9}

.line滚动包装器{空白：nowrap；清除：两者}

.line-normal-wrapper{显示：内联块；行高：100px；浮动：左；填充底部：1px；边距顶部：5px}

.line btn删除{宽度：68px；高度：120px}

到目前为止，我必须在.line普通包装中设置宽度值，以保持删除按钮不出现在页面中，一旦我删除它，它将如下所示：

但是我不能固定普通div的宽度，因为我不能控制所有设备的屏幕大小，即使在同一台设备上，如果旋转屏幕也会很糟糕，因为法线的宽度是固定的

我试着添加这个来设置宽度

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

但是，它只在页面打开时起作用，一旦我添加新行或删除一行，它将成为PIC2外观

那么我现在应该做什么…==

再次更新。。。。嗯……我发现如果我删除ready函数……它会工作……>___

这里的问题是，您的id中有像

：

这样的字符，这些字符对css选择器具有特殊意义，jQuery在其选择逻辑中模仿了这些字符。您可以以各种方式针对这样的元素

//就我个人而言，我会避免使用这个，因为它会进行dom扫描
log（$（'[id=“view:_id1:repeat1:0:normalline”]）.get（）；
console.log（$（'div'）.filter（函数（）{returnthis.id==“view:_id1:repeat1:0:normalline”；}）.get（）；
//如果我被迫的话，我可能会做这个或上面的那个。
console.log（$（document.getElementById（'view:_id1:repeat1:0:normalline'））.get（）
这里的问题是，您的id中有像：
这样的字符，这些字符对css选择器具有特殊意义，jQuery在其选择逻辑中模仿了这些字符。您可以以各种方式针对这样的元素

//就我个人而言，我会避免使用这个，因为它会进行dom扫描
log（$（'[id=“view:_id1:repeat1:0:normalline”]）.get（）；
console.log（$（'div'）.filter（函数（）{returnthis.id==“view:_id1:repeat1:0:normalline”；}）.get（）；
//如果我被迫的话，我可能会做这个或上面的那个。
console.log（$（document.getElementById（'view:_id1:repeat1:0:normalline'））.get（）
从jQuery的角度来看，Taplar的回答是正确的，有一个语法问题阻止使用XPages ID（如您所见，XPages ID必须包含一个使用冒号实现的层次元素，以确保客户端ID的唯一性）
但是，这里有一个特定的XPages原因影响您，这不是ID，而是重复。这将阻止您通过SSJS以及jQueryCSJS从外部访问repeat行
XPages{id:…}
语法用于访问服务器端组件。但是在repeat控件中，您的每一行没有一组组件，您的控件只有一组组件没有绑定到任何行。我已经在今年的几次会议中讨论了这一点，下周将在TLCC网络研讨会上再次讨论。您可以通过使用XPages调试工具栏的Inspector选项卡查看XPage的组件树（XPages使用的页面的服务器端映射）来验证这一点。您将只看到一组组件。如果您设置repeat的indexVar
属性并在ID中使用它，您将看到ID没有包含它，因为它没有为特定行加载组件集，它是独立于repeat的抽象组件集。所以#{id:…}
语法映射到抽象模板组件，而不是特定行中的特定实例
建议在组件上使用CSS样式
或者，如果在repeat控件上设置了repeatControls=“true”
，则将为repeat控件的x行创建一组组件，您可以设置包含repeat控件的indexVar属性的ID，允许您从外部访问它们。Th
<xp:scriptBlock id="scriptBlock1">
    <xp:this.value><![CDATA[
    $(".line-normal-wrapper").width($(window).width());
     ]]></xp:this.value>
</xp:scriptBlock>