2010-05-26 4 views
3

Я хотел бы узнать, можно ли использовать Javascript для поиска тега изображения по его тексту alt. Например, у меня есть этот тег: <img src="Myimage.jpg" alt="Myimage"> был бы способ получить тег, ища атрибут alt «Myimage»?Поиск тега изображения с использованием текста alt

+3

Вы можете использовать JQuery? –

+0

Я вижу, что вы находите тег изображения, используя текст alt. Вы должны полностью отказаться от этого и использовать jQuery! – Josh

+1

Лучше вопрос, используете ли вы какую-либо библиотеку JS? (jquery, prototype, mootols, yui ..) – adamJLev

ответ

7

Несложно будет решение jQuery, размещенное достаточно скоро. Для того, чтобы сделать это без, следующие будут работать:

function getImagesByAlt(alt) { 
    var allImages = document.getElementsByTagName("img"); 
    var images = []; 
    for (var i = 0, len = allImages.length; i < len; ++i) { 
     if (allImages[i].alt == alt) { 
      images.push(allImages[i]); 
     } 
    } 
    return images; 
} 

var myImage = getImagesByAlt("Myimage")[0]; 
7

Вы можете сделать это с JQuery. Следующий код JQuery будет возвращать любое изображение с альт тег установлен в «Myimage»:

$('img[alt="Myimage"]'). 

Однако было бы намного проще и гораздо более производительным использовать идентификатор атрибута тега изображения.

0

Это было бы не так сложно, если NodeList реализовал Iterable. Эта реализация помещает фильтр в прототип NodeList, который может не совпадать с любым вкусом, но я предпочитаю сжатый доступ к моим структурам данных.

<html> 
    <head> 
     <script type="text/javascript"> 
      // unfortunately NodeLists do not have many of the nice Iterate functions 
      // on them, here is an incomplete filter implementation 
      NodeList.prototype.filter = function(testFn) { 
       var array = [] ; 
       for (var cnt = 0 ; cnt < this.length ; cnt++) { 
        if (testFn(this[cnt])) array.push(this[cnt]) ; 
       } 
       return array ; 
      } 

      // loops through the img tags and finds returns true for elements that 
      // match the alt text 
      function findByAlt(altText) { 
       var imgs = document.getElementsByTagName('img').filter(function(x) { 
        return x.alt === altText ; 
       }) ; 

       return imgs ; 

      } 

      // start the whole thing 
      function load() { 
       var images = findByAlt('sometext') ; 

       images.forEach(function(x) { 
        alert(x.alt) ; 
       }) ; 
      } 

     </script> 
    </head> 

    <body onload="load()"> 
     <img src="./img1.png" alt="sometext"/> 
     <img src="./img2.png" alt="sometext"/> 
     <img src="./img3.png" alt="someothertext"/> 
    </body> 
</html> 
+0

Обратите внимание, что вы получите массив назад, поскольку в спецификации DOM нет ничего уникального для создания тегов. – Mike

+0

К сожалению, расширение 'NodeList' исключает IE (по крайней мере, вплоть до версии 7, включая 8, чтобы проверить ее). –

+0

А, к счастью/к сожалению, я работаю в мире без IE. Что представляет собой IE в качестве возврата getElementsByTagName? – Mike

1
var imgElement = document.querySelector(img[alt="MyImage"]) 
Смежные вопросы