jquery - 使用 jquery 获取 html 元素名称

Question

我在网上搜索“popup picture”，我找到了这个源代码的网页

<div class="popup-gallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner">
    <img src="popup/8558295633_f34a55c1c6_s.jpg" height="75" width="75">
</a>
<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance">
    <img src="popup/8558295631_0f56c1284f_s.jpg" height="75" width="75">
</a>
</div>


<script type="text/javascript">
      $(document).ready(function() {
        $('.albumsgallery').magnificPopup({
          delegate: 'a',
          type: 'image',
          tLoading: 'Loading image #%curr%...',
          mainClass: 'mfp-img-mobile',
          gallery: {
            enabled: true,
            navigateByImgClick: true,
            preload: [0,1] // Will preload 0 - before current, and 1 after the current image
          },
          image: {
            tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
            titleSrc: function(item) {
              return item.el.attr('title');
            }
          }
        });
      });
</script>

我想要的是修改jquery 代码以适合我的HTML 代码

  <div class="albumsgallery">
<ul>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album1</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album2</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album3</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album4</div></a></li>
  <li><a class="albumspic" href="images/test.gif"><img src="images/test.gif" alt="gallary picture" title="gallary picture" /><div class="albumtitle">Album5</div></a></li>
</ul>
</div>

你能解释一下我该怎么做吗？

Answer 1

看起来您找到的网站正在使用插件:magnificPopup .

所以去那里并根据插件所需的标记调整您的 HTML...而不是相反;)

来自 MagnificPopup's documentation :

<div class="parent-container">
  <a href="path-to-image-1.jpg">Open popup 1</a>
  <a href="path-to-image-2.jpg">Open popup 2</a>
  <a href="path-to-image-3.jpg">Open popup 3</a>
</div>