jquery - 如何获取重复控件中的元素id

Question

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

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

是的，我使用了函数 x$(idTag, param)...我尝试使用 $("[id$='#{id:normalline}']").css ，当元素不在重复控件中......但是......一旦该元素包含在重复中，它就不再起作用。代码在这里:

updated

我想你们注意到重复中有一个按钮和另一个获取元素 id 的函数，奇怪的是它确实有效!那么为什么当我尝试初始化它时它不起作用呢？我查了源码，元素变成了

x$("view:_id1:repeat1:normalline").css('margin-Left', '-68px');

但真正的元素id是

<'div' id="view:_id1:repeat1:0:normalline"class="line-normal-wrapper">

或者是否有其他方法可以在页面加载时设置CSS？

更新:这是我正在做的元素，希望大家不要介意这里的汉字

我想实现ios-delete-style的效果，当你点击减号按钮时，滚动线的div可以向左移动68px，我知道有很多jquery的东西可以做到这一点，但现在我想重点说明一下法线的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 { 宽度:100%；溢出:隐藏；边框底部:1px实线#E8E8E9}

.line-scroll-wrapper { 空白:nowrap;明确:两者}

.line-normal-wrapper { 显示:内联 block ；行高:100px；向左飘浮;内边距底部:1px；边距顶部:5px}

.line-btn-delete { 宽度:68px;高度:120px}

到目前为止，我必须在.line-normal-wrapper中设置宽度值以保持页面中不出现删除按钮，一旦我删除它，它就会像这样:

但是我无法固定法线div的宽度，因为我无法控制所有设备的屏幕尺寸，即使在同一设备上，如果旋转屏幕也会很糟糕，因为法线的宽度是固定的。 .

我尝试添加它来设置宽度

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

但是，它只在页面打开时起作用，一旦我添加新行或删除一行，它就会变成图2的样子

那我现在该怎么办呢...= =

再次更新.... 呃......我发现如果我删除准备好的功能......它可以工作......>___<

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

Answer 1

从 jQuery 的 Angular 来看，Taplar 的答案是正确的，存在一个语法问题，阻止使用 XPage ID(必须包含使用冒号实现的分层元素，以确保客户端的唯一 ID，就像您参见)。

但是，这里有一个特定的 XPages 原因影响您，这不是 ID，而是重复。这将阻止您通过 SSJS 以及 jQuery CSJS 从外部访问重复行。

XPages #{id:...} 语法用于访问服务器端组件。但是在重复控件中，您没有为每一行提供一组组件，而是有一组未绑定(bind)到任何行的组件。我在今年的几次 session 中对此进行了介绍，并将在下周的 TLCC 网络研讨会上再次介绍。您可以通过使用 XPage 调试工具栏的“检查器”选项卡查看 XPage 的组件树(XPage 使用的页面的服务器端映射)来验证这一点。您将只看到一组组件。如果您设置重复的 indexVar 属性并在 ID 中使用该属性，您将看到 ID 不包含该属性，因为它没有加载特定行的一组组件，而是独立于重复的一组抽象组件。因此 #{id:...} 语法映射到抽象模板组件，而不是特定行中的特定实例。

建议在组件上使用 CSS 样式。

或者，如果在重复控件上设置 repeatControls="true"，则将创建一组用于 x 行重复的组件，并且您可以设置ID 包括重复控件的 indexVar 属性，允许您从外部访问它们。但这不是推荐的方法，因为您需要知道创建了多少行，并且您将无法使用分页器动态更改每组组件绑定(bind)到的行 - 这仅在页面加载时设置。