在div層中找到深度超過一級的類--JQuery

我試圖創建一個選擇器，它將在每個引導程序的手風琴面板標題內抓取圖像。我到目前爲止的代碼是，但這個選擇器似乎沒有罰款$（'手風琴'）。find似乎沒有定位標題。有任何想法嗎？在div層中找到深度超過一級的類--JQuery

JQuery的：

$('accordion').find('.panel-heading').each(function() { 
     $(this).find('img').hide(); 
})

HTML：

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
       Collapsible Group Item #1 
       <img src="image/check.png" class="pull-right check" /> 
      </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
      <form> 
       <div class="form-group"> 
        <label for="exampleInputEmail1">Email address</label> 
        <input type="email" class="form-control class1" id="exampleInputEmail1" placeholder="Email"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1">Password</label> 
        <input type="password" class="form-control class1" id="exampleInputPassword1" placeholder="Password"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
     </div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <h4 class="panel-title"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
       Collapsible Group Item #2 
       <img src="image/check.png" class="pull-right check" /> 
      </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
      <form> 
       <div class="form-group"> 
        <label for="exampleInputEmail1">Email address</label> 
        <input type="email" class="form-control class2" id="exampleInputEmail1" placeholder="Email"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1">Password</label> 
        <input type="password" class="form-control class2" id="exampleInputPassword1" placeholder="Password"> 
       </div> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox" class="class2"> Check me out 
        </label> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
     </div> 
    </div> 
</div> 
<div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingThree"> 
     <h4 class="panel-title"> 
      <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
       Collapsible Group Item #3 
       <img src="image/check.png" class="pull-right check" /> 
      </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="panel-body"> 
      <form> 
       <div class="form-group"> 
        <label for="exampleInputEmail1">Email address</label> 
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
       </div> 
       <div class="form-group"> 
        <label for="exampleInputPassword1">Password</label> 
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
       </div> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox"> Check me out 
        </label> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
     </div> 
    </div> 
</div>

來源

2016-02-04 Web Develop Wolf

錯字：'手風琴'是元素的'id' - 你錯過了'＃'。試試這個：'$（'＃accordion'）。find（.....' –

是的，謝謝:) - 如果你想彈出它作爲答案，我把它標記爲正確，如果你喜歡？ –

沒關係 - 這只是一個打字錯誤，不可能在將來幫助其他任何人。你最好刪除這個問題。 –

看看你不需要通過foreach循環的代碼片段，只需要一行代碼就可以爲你做。

雖然在你的情況下，只有「＃」被失蹤應該

$('#accordion').find('.panel-heading').each(function() { 
     $(this).find('img').hide(); 
    });

但是我會更喜歡使用以下之一：

$('#accordion .panel-heading img').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
 
        <div class="panel panel-default"> 
 
         <div class="panel-heading" role="tab" id="headingOne"> 
 
         <h4 class="panel-title"> 
 
          <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
 
          Collapsible Group Item #1 
 
          <img src="image/check.png" class="pull-right check" /> 
 
          </a> 
 
         </h4> 
 
         </div> 
 
         <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
 
         <div class="panel-body"> 
 
          <form> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1">Email address</label> 
 
          <input type="email" class="form-control class1" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <label for="exampleInputPassword1">Password</label> 
 
          <input type="password" class="form-control class1" id="exampleInputPassword1" placeholder="Password"> 
 
         </div> 
 
         <button type="submit" class="btn btn-default">Submit</button> 
 
         </form> 
 
          </div> 
 
          </div> 
 
         </div> 
 
         <div class="panel panel-default"> 
 
          <div class="panel-heading" role="tab" id="headingTwo"> 
 
          <h4 class="panel-title"> 
 
           <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
 
           Collapsible Group Item #2 
 
           <img src="image/check.png" class="pull-right check" /> 
 
           </a> 
 
          </h4> 
 
          </div> 
 
          <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
 
          <div class="panel-body"> 
 
           <form> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1">Email address</label> 
 
          <input type="email" class="form-control class2" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <label for="exampleInputPassword1">Password</label> 
 
          <input type="password" class="form-control class2" id="exampleInputPassword1" placeholder="Password"> 
 
         </div> 
 
         <div class="checkbox"> 
 
          <label> 
 
          <input type="checkbox" class="class2"> Check me out 
 
          </label> 
 
         </div> 
 
         <button type="submit" class="btn btn-default">Submit</button> 
 
         </form> 
 
          </div> 
 
          </div> 
 
         </div> 
 
         <div class="panel panel-default"> 
 
          <div class="panel-heading" role="tab" id="headingThree"> 
 
          <h4 class="panel-title"> 
 
           <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
 
           Collapsible Group Item #3 
 
           <img src="image/check.png" class="pull-right check" /> 
 
           </a> 
 
          </h4> 
 
          </div> 
 
          <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> 
 
          <div class="panel-body"> 
 
           <form> 
 
         <div class="form-group"> 
 
          <label for="exampleInputEmail1">Email address</label> 
 
          <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> 
 
         </div> 
 
         <div class="form-group"> 
 
          <label for="exampleInputPassword1">Password</label> 
 
          <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> 
 
         </div> 
 
         <div class="checkbox"> 
 
          <label> 
 
          <input type="checkbox"> Check me out 
 
          </label> 
 
         </div> 
 
         <button type="submit" class="btn btn-default">Submit</button> 
 
         </form> 
 
          </div> 
 
          </div> 
 
         </div> 
 
        </div>

來源

2016-02-04 11:58:49 zakaiter

你缺少在代碼中＃。

$('#accordion').find('.panel-heading').each(function() { 
    $(this).find('img').hide(); 
})

來源

2016-02-04 11:50:13 Sumanta736

你已經錯過了＃在選擇器中，你也不需要在這裏使用.each（）方法。像......

$('#accordion').find('.panel-heading img').hide();

來源

2016-02-04 12:03:10 Anis

在div層中找到深度超過一級的類--JQuery

回答

相關問題