1 
  (function(){
  var photoTemplate, resource;

  function init(){
    bindEventHandlers();
    photoTemplate = _.template($('#photo-template').html());
  }

  function toTemplate(photo){
    photo = {
      count: photo.likes.count,
      avatar: photo.user.profile_picture,
      photo: photo.images.low_resolution.url,
      url: photo.link
    };

    return photoTemplate(photo);
  }

  function toScreen(photos){
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
                    .fadeIn();

    $.each(photos.data, function(index, photo){
      photos_html += toTemplate(photo);
    });

    $('div#photos-wrap').append(photos_html);
  }

  function generateResource(tag){
    var config = Instagram.Config, url;

    if(typeof tag === 'undefined'){
      throw new Error("Resource requires a tag. Try searching for cats.");
    } else {
      // Make sure tag is a string, trim any trailing/leading whitespace and take only the first 
      // word, if there are multiple.
      tag = String(tag).trim().split(" ")[0];
    }

    url = config.apiHost + "/v1/tags/" + tag + "/media/recent?callback=?&client_id=" + config.clientID;

    return function(max_id){
      var next_page;
      if(typeof max_id === 'string' && max_id.trim() !== '') {
        next_page = url + "&max_id=" + max_id;
      }
      return next_page || url;
    };
  }


function paginate(max_id){    
        $.getJSON(generateUrl(tag), toScreen);
      }

      function search(tag){
        resource = generateResource(tag);
        $('.paginate a').hide();
        $('#photos-wrap *').remove();
        fetchPhotos();
      }

      function fetchPhotos(max_id){
        $.getJSON(resource(max_id), toScreen);
      }

      function bindEventHandlers(){
        $('body').on('click', '.paginate a.btn', function(){
          var tagID = $(this).attr('data-max-tag-id');
          fetchPhotos(tagID);
          return false;
        });

        // Bind an event handler to the `submit` event on the form
        $('form').on('submit', function(e){

          // Stop the form from fulfilling its destinty.
          e.preventDefault();

          // Extract the value of the search input text field.
          var tag = $('input.search-tag').val().trim();

          // Invoke `search`, passing `tag` (unless tag is an empty string).
          if(tag) {
            search(tag);
          };

        });

      }

      function showPhoto(p){
        $(p).fadeIn();
      }

      // Public API
      Instagram.App = {
        search: search,
        showPhoto: showPhoto,
        init: init
      };
    }());

    $(function(){
      Instagram.App.init();

      // Start with a search on yogofactory; we all love frozen yogurt :).
      Instagram.App.search('yogofactory');  
    });

然后它转到 HTML 文件并围绕它构建画廊

<script type="text/template" id="photo-template">
      <div class='photo'>
          <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);' />
        <img class='avatar' width='40' height='40' src='<%= avatar %>' />
        <span class='heart'><strong><%= count %></strong></span>
      </div>
</script>

我对 JS 或 jQuery 没有经验。我正在寻找一种将类添加到 parent 的方法<div class="photo">，当里面的图像是src="http://image.com/onlythisone.jpg"并且只有当它是那个图像时。

我有一个画廊，一个从 instagram 数据库中动态提取的大型画廊，我基本上希望能够隐藏某些不遵循我为促销创建的哈希标签规则的照片。

任何帮助都是极好的！提前致谢！

4

2 回答 2

4 
$(function() {
    $('img[src="http://image.com/onlythisone.jpg"]').parent().addClass('myClass')
});

编辑：

function toScreen(photos) {
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
        .fadeIn();

    $.each(photos.data, function (index, photo) {
        photos_html += toTemplate(photo);
    });

    photos_html.find('img[src="http://image.com/onlythisone.jpg"]').remove();

    $('div#photos-wrap').append(photos_html);
}
于 2013-05-17T20:31:52.000 回答
0

这是一个用 javascript 编写的函数，当使用设置为图像的 src 值和类名的属性调用时，将搜索所有图像并将指定的类添加到它的父级（如果它尚不存在）。只需在加载任何图像后运行该功能。

function addClassToSpecificImageParent(imageUrl, className) {
    Array.prototype.forEach.call(document.getElementsByTagName("img"), function (element) {
        if (element.src === imageUrl && !element.parentNode.classList.contains(className)) {
            element.parentNode.classList.add(className);
        }
    });
}

addClassToSpecificImageParent("http://image.com/onlythisone.jpg", "someClass");

;

在jsfiddle 上

更新：根据您现在发布的代码，您将添加对上述函数的调用，如下所示

function toScreen(photos) {
    var photos_html = '';

    $('.paginate a').attr('data-max-tag-id', photos.pagination.next_max_id)
        .fadeIn();

    $.each(photos.data, function (index, photo) {
        photos_html += toTemplate(photo);
    });

    $('div#photos-wrap').append(photos_html);

    addClassToSpecificImageParent("http://image.com/onlythisone.jpg", "someClass");
}

更新：现在您已经发布了更多详细信息，另一种方法是使用下划线模板

HTML - 下划线模板

<script type="text/template" id="photo-template">
      <div class='photo<%= extraclass %>'>
        <img class='main' src='<%= photo %>' width='250' height='250' style='display:none;' onload='Instagram.App.showPhoto(this);' />
        <img class='avatar' width='40' height='40' src='<%= avatar %>' />
        <span class='heart'><strong><%= count %></strong></span>
      </div>
</script>

Javascript

function toTemplate(photo) {
    photo = {
        count: photo.likes.count,
        avatar: photo.user.profile_picture,
        photo: photo.images.low_resolution.url,
        url: photo.link,
        extraclass: ""
    };

    if (photo.link === "http://image.com/onlythisone.jpg") {
        photo.extraclass = " someclass";
    }

    return photoTemplate(photo);
}
于 2013-05-17T20:42:35.817 回答