Question

在jquery移动页面中，我有一个带嵌套字段集的页面。我需要在点击某个按钮的任何时候动态添加输入和按钮字段。我的第一步是尝试找到最后一个动态添加的控制组的id 那是我被困的地方。我已经尝试了很多不同的方式来到div但是没有运气，所以我希望能得到专家的帮助。

我最近的尝试......

  $('#ServicePage #ServiceArticle #ServiceList #collapse #btnaddOther').on('click', function () {
     var ct = $('#ServicePage #ServiceArticle #ServiceList  #collapse');
     getLastId(ct);
  });

  function getLastId(ct) {
    var id = $(ct.last).attr('id');
    addOtherItem(id);
  }

以下是该页面的示例。我试图达到的div低于第二个fieldset并且具有崩溃的id。我需要在崩溃div中获取最后一个子div，即我需要返回id = addOther_1。我希望这是有道理的。

    <div id="ServicePage" data-role="page" class="ui-page-theme-a">
    <article id="ServiceArticle" data-role="content" class="ui-content">
        <form>
            <br />
            <div id="ServiceList" class="ui-corner-all custom-corners">
                <div class="ui-bar ui-bar-b">
                    <h3>Color Services</h3>
                </div>
                <div class="ui-body ui-body-a">
                    <fieldset data-role="controlgroup">
                        <legend>Select Color Services</legend>
                        <input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
                        <label for="serviceHiLight">Highlights</label>
                        <input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
                        <label for="serviceLoLight">Low-Lights</label>
                        <input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
                        <label for="serviceRetouch">Retouch</label>
                        <input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
                        <label for="serviceHiLightRetouch">Highlight Retouch</label>
                        <input type="checkbox" name="service" id="servicePainting" value="Painting" />
                        <label for="servicePainting">Painting like Ombre or Balayage</label>
                        <input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
                        <label for="serviceAllOver">All over color</label>
                        *<fieldset data-role="collapsible">
                            <legend>Other</legend>
                            <div id="collapse" data-role="controlgroup">
                                <div id="addOther_1" data-role="controlgroup" data-type="horizontal">
                                    <input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
                                    <button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
                                </div>
                                <a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
                            </div>
                        </fieldset>
                    </fieldset>
                </div>
            </div>
        </form>
    </article>
</div>

我如何访问这个嵌套的div？

由于

Answer 1

function getLastId() {
    var $x = $('fieldset:last-of-type > div:first-of-type > div:first-of-type')
    // addOtherItem($x.attr("id"));
    // Just to show we got the id, I am putting it in a div.
    // Remove when done and un-comment line 3
    $('#tmpDiv').html($x.attr("id"))
  }

$('#btn').on('click', function(){
  getLastId();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- TMP -->
<div id="tmpDiv"></div>
<button id="btn">Click Me</button>
<!-- / TMP -->
<div id="ServicePage" data-role="page" class="ui-page-theme-a">
    <article id="ServiceArticle" data-role="content" class="ui-content">
        <form>
            <br />
            <div id="ServiceList" class="ui-corner-all custom-corners">
                <div class="ui-bar ui-bar-b">
                    <h3>Color Services</h3>
                </div>
                <div class="ui-body ui-body-a">
                    <fieldset data-role="controlgroup">
                        <legend>Select Color Services</legend>
                        <input type="checkbox" name="service" id="serviceHiLight" value="HiLight" />
                        <label for="serviceHiLight">Highlights</label>
                        <input type="checkbox" name="service" id="serviceLoLight" value="LoLight" />
                        <label for="serviceLoLight">Low-Lights</label>
                        <input type="checkbox" name="service" id="serviceRetouch" value="Retouch" />
                        <label for="serviceRetouch">Retouch</label>
                        <input type="checkbox" name="service" id="serviceHiLightRetouch" value="HiLightRetouch" />
                        <label for="serviceHiLightRetouch">Highlight Retouch</label>
                        <input type="checkbox" name="service" id="servicePainting" value="Painting" />
                        <label for="servicePainting">Painting like Ombre or Balayage</label>
                        <input type="checkbox" name="service" id="serviceAllOver" value="AllOver" />
                        <label for="serviceAllOver">All over color</label>
                        *<fieldset data-role="collapsible">
                            <legend>Other</legend>
                            <div id="collapse" data-role="controlgroup">
                                <div id="addOther_1" data-role="controlgroup" data-type="horizontal">
                                    <input id="txtaddOther_1" type="text" name="service" data-wrapper-class="controlgroup-textinput ui-btn" placeholder="Enter Service Name" />
                                    <button id="btnDeleteOther_1" style="background-color: transparent; border-style: none;" class="ui-btn-b ui-shadow ui-btn ui-icon-delete ui-btn-inline ui-btn-icon-notext ui-corner-all">Delete</button>
                                </div>
                                <a id="btnaddOther" href="#" class="ui-btn ui-shadow ui-btn-icon-left ui-icon-plus">Add</a>
                            </div>
                        </fieldset>
                    </fieldset>
                </div>
            </div>
        </form>
    </article>
</div>

我喜欢“最后类型”和“第一类型”选择器

$('fieldset:last-of-type > div:first-of-type > div:first-of-type')

http://api.jquery.com/last-of-type-selector/

上面将选择最后一个字段集，然后是第一个直接子div，然后是第一个div（这是你想要的那个）。

Answer 2

为什么不使用ID跟踪最后一个..例如：id =＆＃39; LastOne＆＃39;，现在，当您添加新项目时，从实际的最后一项中删除该属性，然后只需将其放在您即将添加的那个上即可。基本上，这样的事情：

$(document).ready(function(){
    $('.add').click(function(){
        var nvar = $('#lo').removeAttr('id').clone();
        nvar.attr('id','lo');
        nvar.insertAfter($('.mydiv').last());
    });
});

你点击一个ADD按钮（带有.add类），然后它找到LasOne（简称LO），删除attr，复制它然后将它放在最后一个下面。当然，您也可以在插入后删除attr。这样，你就不需要使用＆＃34;最后了......因为你真的不知道最后一个是什么。

检查在此工作的小提琴：http://jsfiddle.net/lrojas94/v26fk8yd/

Answer 3

我这样做很困难。我通过尝试charlietfl所说的“得到答案”因为它有一个ID只使用那个$（'＃collapse'）因为根据定义ID是独一无二的 - charlietfl“ 因为我使用的是jquery mobile，所以我必须包含页面名称，因此它只是

$addOther = $('#ServicePage #collapse');

jquery移动页面的名称和我需要查看的div的ID。

感谢大家的帮助。

我忘了添加我在该div中找到最后一个div的方式......

$('#ServicePage #collapse').find('.a').last();

这发现最后一个div有一个div。我要查看的div有id #collapse。

在嵌套字段集中查找最后一个子div

3 个答案: