在嵌套字段集中找到最后 child div

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 位于第二个字段集下方，并且 ID 为 collapse。我需要在崩溃 div 中获取最后一个 child div 即我需要 return 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

为什么不使用 id 来跟踪最后一个。例如：id = 'LastOne'，现在，当您添加一个新项目时，从实际的最后一个项目中删除属性，然后就可以了把它放在你要添加的那个上。基本上是这样的：

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

你点击一个ADD按钮（带有class.add），然后它会寻找LasOne（简称LO），删除它的属性，复制它，然后将它放在最后一个。当然，您也可以在插入后删除属性。这样，您就不需要使用 "LAST".. 因为您真的不知道最后一个是什么。

检查 fiddle 在这里工作：http://jsfiddle.net/lrojas94/v26fk8yd/

Answer 2

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>

我喜欢 "last-of-type" 和 "first-of-type" select 或

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

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

以上将 select 最后一个字段集，然后是第一个直接子 div，然后是第一个 div（这是您想要的）。

Answer 3

我让这个 wayyyyy 变得很困难。我通过尝试 charlietfl 所说的东西得到了答案 "Since it has an ID just use that $('#collapse') since by definition ID's are unique – charlietfl" 因为我使用的是 jquery 移动设备，所以我必须包含页面名称，所以它只是

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

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

感谢大家的帮助。

我忘了添加我是如何找到最后一个 div 的 div...

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

这找到了带有 div 的最后一个 div。我要查找的 div 具有 ID #collapse。

在嵌套字段集中找到最后 child div

finding last child div in nested fieldset

javascript

jquery

html

jquery-mobile