用jquery选择子元素

时间:2016-12-31 00:28:09

标签: jquery html

我想从下面的html中获取一些元素,但我没有成功。 我正在尝试将一些li附加到.istasyon-listele .havalimani的孩子$('#location-info .havalimani>.istasyon-listele')

我试过这个$('#location-info .havalimani .istasyon-listele')没有帮助我 我也试过.isim也没有帮助。

如果我尝试选择$('#location-info .isim')我可以使用<div class="location-info" id="location-info" style="position: absolute;z-index:9999999; display:none;"> <ul class="location-name"> <li class="havalimani"> <h5 class="havalimanih5"> Havalimanı Şubeleri</h5> <ul class="istasyon-liste"> <li>asdada</li> </ul> </li> <li class="sehirici"> <h5 class="sehiricih5">Şehiriçi Şubeleri</h5> <ul class="istasyon-liste"> </ul> </li> </ul> <div class="detail-info visible-lg visible-md" id="1"> <div class="detail-info-contact"> <h5 class="isim">Kusadasi</h5> <p class="adres">Ataturk Bulvari</p> <ul id="bilgiler"> <li class="telefon">Telefon : <span></span></li> <li class="haftaici">Hafta içi : <span class="hici"></span></li> <li class="cumartesi">Cumartesi : <span class="hsonu"></span></li> <li>Pazar : <span class="pazar"></span></li> </ul> </div> <style> .detail-info-contact { margin-bottom:0; } .detail-info-contact ul { text-align: left; text-indent: 7px; } .detail-info-contact ul li { font-size: 11px; padding: 0 5px 0 0; vertical-align: top; } </style> <div class="googlemap" class="map-canvas"> </div> </div> </div> ,那么它对我有效。但其他人则没有。

$('#location-info .havalimani>.istasyon-liste').append('<li>something</li>');

所以我无法将任何li元素附加到$('#location-info .havalimani&gt; .istasyon-liste') 例如,我试过这个:

{{1}}

没效果。

但如果我记录$('#location-info .havalimani&gt; .istasyon-liste')我可以看到“asdada”

1 个答案:

答案 0 :(得分:0)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      .detail-info-contact {
        margin-bottom:0;
      }
      .detail-info-contact ul {
        text-align: left;
        text-indent: 7px;
      }
      .detail-info-contact ul li {
        font-size: 14px;
        padding: 0 5px 0 0;
        vertical-align: top;
     }
   </style>
 </head>
<body>
  <div class="location-info" id="location-info" >
   <ul class="location-name">
    <li class="havalimani">
        <h5  class="havalimanih5"> Havalimanı Şubeleri</h5>
        <ul class="istasyon-liste">
            <li>asdada</li>
        </ul>
    </li>
    <li class="sehirici">
        <h5 class="sehiricih5">Şehiriçi Şubeleri</h5>

        <ul class="istasyon-liste">
        </ul>
     </li>
   </ul>
   <div class="detail-info visible-lg visible-md" id="1">
    <div class="detail-info-contact">
        <h5 class="isim">Kusadasi</h5>
        <p class="adres">Ataturk Bulvari</p>
        <ul id="bilgiler">
            <li class="telefon">Telefon : <span></span></li>
            <li class="haftaici">Hafta içi : <span class="hici"></span></li>
           <li class="cumartesi">Cumartesi:<span class="hsonu"></span> </li>        
            <li>Pazar : <span class="pazar"></span></li>
        </ul>
    </div>
  </div>
 </div>
 <script src="js/jquery_2.1.4.min.js"></script>
 <script>
    $(document).ready(function(){

      var link = $("<li>", {
     "text":"I'm a new link!",
     "css":{"background":"yellow"}
     });
   // or if you prefer : var link = "<li>something</li>"
   $('li.havalimani').find("ul.istasyon-liste").append(link);
  });
   </script>
</body>

我已经测试过,它会在内部ul中添加一个li。