2014-12-16 2 views
0

Я пытаюсь скрыть div. Мне удалось скрыть это. Но я думаю, что это неправильный путь. Я пытаюсь скрыть весь div, который внутри имеет много элементов DOM, таких как span & div .. Вот мой код. Я думаю, что я не должен показывать или скрывать, используя количество раз parent(). Что может быть коротким или быстрым? Есть предположения?Скрыть div, используя jquery

$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').parent().parent().parent().parent().parent().show(); 
$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').not(':lt('+(noNcbYear + 1)+')').parent().parent().parent().parent().parent().hide(); 

Мой HTML код

    <div class="col-md-12 ncbclaim-slider raja"> 

         <div tooltip-message="If you have claimed before, then select 'Yes'. An NCB (No Claim Bonus) certificate will be required from your previous insurer at the time of claim settlement." showtooltipon="hover" class="claim-details-tooltip" data-original-title="" title=""> 
          <div class="touch-icon"> 
           <label class="radio checked"> 
            <label for="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes&quot;&quot;"> 
             <div class="radio-box"> 
              <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" class="validate basic-required-options" data-toggle="radio" id="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes" name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"> 
             </div> 
             <span class="city-name">0%</span> 
             <span class="city-name">(1 yrs)</span> 
            </label> 
           </label> 
          </div> 
         </div> 

         <div title="" data-original-title="" class="claim-details-tooltip" showtooltipon="hover" tooltip-message="If you have claimed before, then select 'Yes'. An NCB (No Claim Bonus) certificate will be required from your previous insurer at the time of claim settlement."> 
          <div class="touch-icon"> 
           <label class="radio"> 
            <label for="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes&quot;&quot;"> 
             <div class="radio-box"> 
              <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim" id="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes" data-toggle="radio" class="validate basic-required-options"> 
             </div> 
             <span class="city-name">20%</span> 
             <span class="city-name">(2 yrs)</span> 
            </label> 
           </label> 
          </div> 
         </div> 

         <div title="" data-original-title="" class="claim-details-tooltip" showtooltipon="hover" tooltip-message="If you have claimed before, then select 'Yes'. An NCB (No Claim Bonus) certificate will be required from your previous insurer at the time of claim settlement."> 
          <div class="touch-icon"> 
           <label class="radio"> 
            <label for="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes&quot;&quot;"> 
             <div class="radio-box"> 
              <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim" id="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes" data-toggle="radio" class="validate basic-required-options"> 
             </div> 
             <span class="city-name">25%</span> 
             <span class="city-name">(3 yrs)</span> 
            </label> 
           </label> 
          </div> 
         </div> 

         <div title="" data-original-title="" class="claim-details-tooltip" showtooltipon="hover" tooltip-message="If you have claimed before, then select 'Yes'. An NCB (No Claim Bonus) certificate will be required from your previous insurer at the time of claim settlement."> 
          <div class="touch-icon"> 
           <label class="radio"> 
            <label for="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes&quot;&quot;"> 
             <div class="radio-box"> 
              <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim" id="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes" data-toggle="radio" class="validate basic-required-options"> 
             </div> 
             <span class="city-name">35%</span> 
             <span class="city-name">(4 yrs)</span> 
            </label> 
           </label> 
          </div> 
         </div> 

         <div title="" data-original-title="" class="claim-details-tooltip" showtooltipon="hover" tooltip-message="If you have claimed before, then select 'Yes'. An NCB (No Claim Bonus) certificate will be required from your previous insurer at the time of claim settlement."> 
          <div class="touch-icon"> 
           <label class="radio"> 
            <label for="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes&quot;&quot;"> 
             <div class="radio-box"> 
              <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim" id="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes" data-toggle="radio" class="validate basic-required-options"> 
             </div> 
             <span class="city-name">45%</span> 
             <span class="city-name">(5 yrs)</span> 
            </label> 
           </label> 
          </div> 
         </div> 

         <div tooltip-message="If you have claimed before, then select 'Yes'. An NCB (No Claim Bonus) certificate will be required from your previous insurer at the time of claim settlement." showtooltipon="hover" class="claim-details-tooltip" data-original-title="" title=""> 
          <div class="touch-icon"> 
           <label class="radio"> 
            <label for="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes&quot;&quot;"> 
             <div class="radio-box"> 
              <span class="icons"><span class="first-icon fui-radio-unchecked"></span><span class="second-icon fui-radio-checked"></span></span><input type="radio" class="validate basic-required-options" data-toggle="radio" id="eForm_form_details_insurancePolicyToTransfer_noClaimInLastPolicyPeriodYes" name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"> 
             </div> 
             <span class="city-name">50%</span> 
             <span class="city-name">(&gt;5 yrs)</span> 
            </label> 
           </label> 
          </div> 
         </div> 
        </div> 
+0

Что такое класс/идентификатор div, который вы хотите показать/скрыть? – goseo

ответ

0
$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').parent().parent().parent().parent().parent().show(); 
$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').not(':lt('+(noNcbYear + 1)+')').parent().parent().parent().parent().parent().hide();claim-details-tooltip 

Измените исходный код, как это ниже ↓↓↓↓↓

$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').parents('.claim-details-tooltip').show(); 
$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').not(':lt('+(noNcbYear + 1)+')').parents('.claim-details-tooltip').hide(); 

используйте .parents() API в следующий раз, когда вы пытаетесь сделайте что-нибудь подобное. Он перейдет к указанному селектору, поэтому вам не обязательно использовать .parent() снова и снова.

+0

Спасибо Хина. Он отобразит все кнопки одновременно. Неправильно в этом случае. –

+0

@ShaikNizamAli Что вы подразумеваете под «Неправильно в этом случае»? Разве вы не ищете простой способ найти определенных предков? Если есть еще, уточните свой вопрос. Тогда я изучаю это. – hina10531

+0

Я занимался скрытием и отображением только определенных переключателей вместе с div. Но, с обновленным кодом, он отображает все сразу без какой-либо проверки. –

0

Попробуйте следующее: Вы можете использовать селектор .parents().

$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').parents(".claim-details-tooltip").show(); 
$('.raja input:radio[name="form.details.insurancePolicyToTransfer.noClaimBonusInBPS.noClaim"]').not(':lt('+(noNcbYear + 1)+')').parents(".claim-details-tooltip").hide(); 
+1

Да, или .closest() –

+0

Он отобразит все кнопки одновременно. –

Смежные вопросы