使用jQuery将非唯一HTML元素作为目标

Target non-unique HTML element with jQuery

本文关键字：元素 目标 HTML 唯一 jQuery 使用      更新时间：2023-09-26

我想将JS淡入/淡出应用于没有唯一ID或类的HTML元素。

<div class="view-content">
      <table class="views-view-grid cols-3">
  <tbody>
          <tr class="row-1 row-first row-last">
                  <td class="col-1 col-first views-portals-row">
  <div class="views-field views-field-title">        <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/hydrography">Hydrography</a></h1>  </div>  
  <div class="views-field views-field-field-attribution">        <div class="field-content view_portals_attr" style="display: none;"></div>  </div>  
  <div class="views-field views-field-field-image-portal">        <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/hydrography"><img width="261" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/hydrography.jpg" typeof="foaf:Image"></a></div>  </div>  
  <div class="views-field views-field-body">        <div class="field-content view_portals_desc"><p>Data on bathymetry&nbsp;(water depth), coastlines, and geographical location of underwater features:&nbsp;wrecks.</p>
<p><a href="http://dev.test.eu/content/hydrography" class="button small">Read more</a></p>
</div>  </div>          </td>
                  <td class="col-2 views-portals-row">
  <div class="views-field views-field-title">        <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/geology">Geology</a></h1>  </div>  
  <div class="views-field views-field-field-attribution">        <div class="field-content view_portals_attr" style="display: none;"></div>  </div>  
  <div class="views-field views-field-field-image-portal">        <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/geology"><img width="299" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/geology.png" typeof="foaf:Image"></a></div>  </div>  
  <div class="views-field views-field-body">        <div class="field-content view_portals_desc"><p>Data on seabed substrate, sea-floor geology, coastal behaviour, geological events and probabilities, and minerals.</p>
<p><a href="http://dev.test.eu/content/geology" class="button small">Read more</a></p>
</div>  </div>          </td>
                  <td class="col-3 col-last views-portals-row">
  <div class="views-field views-field-title">        <h1 class="field-content view_portals_title"><a href="http://dev.test.eu/content/seabed-habitats-0">Seabed Habitats</a></h1>  </div>  
  <div class="views-field views-field-field-attribution">        <div class="field-content view_portals_attr" style="display: none;">Posidonia oceanica, &copy; David Balata</div>  </div>  
  <div class="views-field views-field-field-image-portal">        <div class="field-content view_portals_img"><a href="http://dev.test.eu/content/seabed-habitats-0"><img width="267" height="200" alt="" src="http://dev.test.eu/sites/test.eu/files/public/Posidonia%20oceanica_2.jpg" typeof="foaf:Image"></a></div>  </div>  
  <div class="views-field views-field-body">        <div class="field-content view_portals_desc"><p>Data on modelled seabed habitats based on seadbed substrate, energy , biological zone, and&nbsp;salinity.</p>
<p><a href="http://dev.test.eu/content/seabed-habitats-0" class="button small">Read more</a></p>
</div>  </div>          </td>
              </tr>
      </tbody>
</table>
    </div>

我使用以下脚本来隐藏和显示图片的属性：

(function ($) {
    $(document).ready(function() {
    $('.view_portals_attr').hide();
      $('.views-portals-row').hover(function() {
        $('.view_portals_attr').fadeIn();
      }, function() {
        $('.view_portals_attr').fadeOut();
      });
    });      
})(jQuery);

问题是，当鼠标悬停在列表中的任何图片上时，都会显示所有属性。有人能告诉我如何一次瞄准一个吗？

您需要的是只选择子项，如下所示：

(function ($) {
    $(document).ready(function() {
    $('.view_portals_attr').hide();
      $('.views-portals-row').hover(function() {
        $(this).find('.view_portals_attr').fadeIn();
      }, function() {
        $(this).find('.view_portals_attr').fadeOut();
      });
    });      
})(jQuery);

请参阅演示：http://jsfiddle.net/SVxKx/

相关文章：