添加一類特定的圖像

Question

(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的經歷的父母DIV 。我正在尋找一種方法來向父代添加一個類，當內部圖像是src="http://image.com/onlythisone.jpg"並且只有當它的圖像。

我有一個畫廊是從instagram數據庫動態拉動的大型畫廊，我基本上希望能夠隱藏某些不遵循我爲我的宣傳創建的哈希標記規則的照片。

任何幫助將是真棒！提前致謝！

Answer 1

這裏是用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); 
} 

Answer 2

$(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); 
}