遇到 jQuery 查找问题答案

【问题标题】：Having issues with jQuery find遇到 jQuery 查找问题
【发布时间】：2013-06-11 09:56:19
【问题描述】：

我当前有一个表单，它在选择选项时将类附加到输入标签。在使用 iCheck 插件之前，我让它运行良好。我基本上是通过一系列父母来找到“.frmLabel”类并向其添加“.frmLabelChecked”类。它适用于我的选择和文本输入，但不适用于单选和复选按钮。

据我所见，iCheck 插件为表单样式添加了一个额外的 div 元素，因此添加一个额外的 parent() 似乎可以解决问题。这有点乱，但这是我能做的最好的事情，因为我正在使用的小部件是动态拉入的。

可以在此处找到实时示例：http://bvp.dmediastudios.com 并且没有 icheck 的版本（有效）在此处http://bvp.dmediastudios.com/v4/

代码如下：

    $('.frmInput input[type=radio]').click(function () {

    // buy or lease options, have to seperate functions for each option since the html structure is different for each one so a all size fits solution using parent() is not possible (that I know of) - very lame. BETTER DONE THAN PERFECT!

    if ($('.frmInput input[type=radio]').is(':checked')) {

        // parent(1) = #harwidget, parent(2) = #homefinderform, parent(3) .frmRow - find .frmLabel
        $(this).parent().parent().parent().parent().find('.frmLabel').addClass('frmLabelChecked');

    }

});

复选框代码

    $('#divBuyType').on('click', 'input:checkbox', function () {
    $(this).parent().parent().parent().parent().find('.frmLabel').toggleClass('frmLabelChecked', this.checked);
});

非工作版本可以在这里找到：bvp.dmediastudios.com，工作版本（没有 iCheck）可以在这里找到：bvp.dmediastudios.com/v4/

这里是上面函数引用的html块

<div id="mywidget3A0A581997704AA41EB19FFEC804E593" style="text-align:left;">
<div style="width:450px;height:520px;" id="widgetOuter">
    <div id="widgetContainer">
        <div class="widgetHeader" style="display: none;">
            <div class="widgetRight">
                <div class="widgetMidd">
                    <div class="widgetTitle">Home Finder</div>
                    <div class="widgetBackBtn" id="hartab3A0A581997704AA41EB19FFEC804E593" style="display:none;">
                        <img src="" onclick="showSearch('3A0A581997704AA41EB19FFEC804E593')" style="cursor:pointer;">
                    </div>
                    <div class="titleBar" id="titleBar3A0A581997704AA41EB19FFEC804E593"></div>
                </div>
            </div>
        </div>
        <div class="widgetBody">
            <span id="widgetBodyDiv" style="height:438px;" onscroll="fixTip('3A0A581997704AA41EB19FFEC804E593');">
                <div id="harwidget3A0A581997704AA41EB19FFEC804E593" style="padding: 10px; display: block;">
                    <form name="homefinderform" method="get" class="forms" id="homefinderform">
                        <div class="frmRow">
                            <div class="frmLabel">Buy or Lease :</div>
                            <div class="frmInput">
                                <span>
                                    <div class="iradio_minimal-grey checked" style="position: relative;">
                                        <input type="radio" name="For_Sale" value="1" checked="" onclick="showBuyDiv(this)" class="radioButton" style="position: absolute; opacity: 0;">
                                        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                    </div>Buy</span>
                                <span>-</span>
                                <span>
                                    <div class="iradio_minimal-grey" style="position: relative;">
                                        <input type="radio" name="For_Sale" value="0" onclick="showLeaseDiv(this)" class="radioButton" style="position: absolute; opacity: 0;">
                                        <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                    </div>Lease</span>
                            </div>
                        </div>
                        <div class="frmRow">
                            <div class="frmLabel">Property Type</div>
                            <div class="frmInput">
                                <div id="divBuyType">
                                    <span>
                                        <div class="icheckbox_minimal-grey checked" style="position: relative;">
                                            <input name="PROPERTY_CLASS_ID" value="1" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked="">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Single Family Homes
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROPERTY_CLASS_ID" value="2" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Townhouse/Condo
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROPERTY_CLASS_ID" value="6" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Highrise Condominium
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROPERTY_CLASS_ID" value="3" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Residential Lots &amp; Land
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROPERTY_CLASS_ID" value="4" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Multi-Family
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROPERTY_CLASS_ID" value="5" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Homes and/or Acreage</span>
                                </div>
                                <div id="divLeaseType" style="display:none;">
                                    <span>
                                        <div class="icheckbox_minimal-grey checked" style="position: relative;">
                                            <input name="PROP_TYPE" value="'SGL'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;" checked="">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Single Family Homes
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROP_TYPE" value="'THC'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Townhouse/Condo
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROP_TYPE" value="'HIR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Highrise Condominium
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROP_TYPE" value="'LOT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Residential Lots &amp; Land
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROP_TYPE" value="'MLT'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Multi-Family
                                        <div class="br">
                                            <br>
                                        </div>
                                        <div class="icheckbox_minimal-grey" style="position: relative;">
                                            <input name="PROP_TYPE" value="'ACR'" type="checkbox" style="width: 20px; position: absolute; opacity: 0;">
                                            <ins class="iCheck-helper" style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: rgb(255, 255, 255); border: 0px; opacity: 0; background-position: initial initial; background-repeat: initial initial;"></ins>
                                        </div>Homes and/or Acreage
                                        <div class="br">
                                            <br>
                                        </div>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--Start Select Fields-->

任何帮助将不胜感激。在页面本身上查看 html 可能会更容易。

【问题讨论】：

$(this).parent().parent().parent().parent() 真的吗？试试api.jquery.com/closest。
我们都必须从某个地方开始，我只是注意到我无法在点击时触发简单的警报。不过，我会调查“最近的”，谢谢。
看起来 iCheck 用不同的元素替换了单选按钮，所以您实际上并没有点击单选按钮，$('.frmInput input[type=radio]').click(function () { }); 将不起作用。
除了$(this).closest('.frmRow')之外，另一个改变$(this).parent().parent().parent().parent()的选项是$(this).parents('.frmRow')。父母不止一次横穿，直到找到你想要的
Jason P，我刚刚想通了。正要发帖说忽略这个问题。我是慢热型。我会回复一些并回答我自己的问题，以防其他人遇到同样的问题。谢谢。

标签： jquery icheck

【解决方案1】：

如果其他人使用此插件并需要使用单选框或复选框触发某种类型的事件，请使用此插件。

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

文档可以在这里找到：https://github.com/fronteed/iCheck

【讨论】：