Javascript-форум - перебор тегов

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - перебор тегов (https://javascript.ru/forum/events/31207-perebor-tegov.html)

frant32

30.08.2012 00:01

перебор тегов

задача состоит в том что-бы получить список тегов на странице и сделать выборку по атрибуту.

var img = document.getElementsByTagName('img');
for(i=0;i<img.length;i++);
imgList = img[i];

а вот дальш я чёт допереть не могу как выбрать тот тег по атрибуту допустим title="myimg"
да и найдя его сделать переменной которая хранит его

Deff	30.08.2012 00:11

if (img[i].title=="myimg"){
 //
}

frant32

30.08.2012 00:14

а как создать переменную этого тега с данным значением атрибута
а вот так будет работать img[i].src == 'blabla'?

Deff	30.08.2012 00:18

Цитата:

Сообщение от frant32

а как создать переменную этого тега с данным значением атрибута

var arrMyAttrib=[]
if (img[i].title=="myimg"){ 
 arrMyAttrib.push(img[i]);
}

cyber

30.08.2012 00:22

var attr = [];
attr[img[i].src] = 'blabla';

frant32

30.08.2012 00:26

тоесть будет работать если так

<html>
 <head> 
   <script>
window.onload = function(){

var img = document.getElementsByTagName('img');

for(i=0;i<img.length;i++){
   var arrMyAttrib=[]
     
   if (img[i].title=="fst"){
      arrMyAttrib.push(img[i]);
      alert(arrMyAttrib[0].title) 
   }
}

}



  </script>
 </head>
<body>

<img width='50' height='50' title='fst' />
<img width='50' height='50' title='snd' />
<img width='50' height='50' title='trd' />
<img width='50' height='50' title='fth' />
<img width='50' height='50' title='ffth' />


</body>
</html>

cyber

30.08.2012 00:36

Цитата:

Сообщение от frant32 (Сообщение 201553)

тоесть будет работать если так

<html>
 <head> 
   <script>
window.onload = function(){

var img = document.getElementsByTagName('img');

for(i=0;i<img.length;i++){
   var arrMyAttrib=[]
     
   if (img[i].title=="fst"){
      arrMyAttrib.push(img[i]);
      alert(arrMyAttrib[0].title) 
   }
}

}



  </script>
 </head>
<body>

<img width='50' height='50' title='fst' />
<img width='50' height='50' title='snd' />
<img width='50' height='50' title='trd' />
<img width='50' height='50' title='fth' />
<img width='50' height='50' title='ffth' />


</body>
</html>

а самому проверить слабо?

frant32

30.08.2012 00:39

оно то работает, это я понял , но может же быть что что-то не правильно и при каких-то обстоятельствах работать не будет.

frant32

30.08.2012 00:58

а вот переменная arrMyAttrib[0] будет доступна из любого места в скрипте или только в теле функции (onload) ?

cyber

30.08.2012 01:17

что бы не задавать такие вопросы нужно читать книги в них все это описанно

Deff	30.08.2012 01:18

Цитата:

Сообщение от frant32

а вот переменная arrMyAttrib[0] будет доступна из любого места в скрипте или только в теле функции (onload) ?

Вы можете её вернуть из функции
return arrMyAttrib;
Либо определить её изначально в глобальной области видимости;

Либо определить в теле функции как глобальную
arrMyAttrib = new window.Object()

frant32

30.08.2012 13:19

<html>
 <head> 
   <script>
window.onload = function(){

var img = document.getElementsByTagName('img');

for(i=0;i<img.length;i++){
   var arrMyAttrib=[]
     
   if (img[i].title=="fst"){
      arrMyAttrib.push(img[i]);
    <!--   alert(arrMyAttrib[0].title); -->
   }
}

 alert(arrMyAttrib[0].title); <!--вынес сюда-->

}



  </script>
 </head>
<body>

<img width='50' height='50' title='fst' />
<img width='50' height='50' title='snd' />
<img width='50' height='50' title='trd' />
<img width='50' height='50' title='fth' />
<img width='50' height='50' title='ffth' />


</body>
</html>

а вот почему так не работает (alert(arrMyAttrib[0].title) вынес из if )

Deff	30.08.2012 13:27

Цитата:

Сообщение от Deff

Либо определить её изначально в глобальной области видимости;

<html>
 <head> 
<script>
var arrMyAttrib=[];
window.onload = function(){

var img = document.getElementsByTagName('img');
for(i=0;i<img.length;i++){

     
   if (img[i].title=="fst"){
      arrMyAttrib.push(img[i]);
    <!--   alert(arrMyAttrib[0].title); -->
   }
}

 alert(arrMyAttrib[0].title); <!--вынес сюда-->

}



  </script>
 </head>
<body>

<img width='50' height='50' title='fst' />
<img width='50' height='50' title='snd' />
<img width='50' height='50' title='trd' />
<img width='50' height='50' title='fth' />
<img width='50' height='50' title='ffth' />


</body>
</html>

Цитата:

Сообщение от Deff

Либо определить в теле функции как глобальную

<html>
 <head> 
   <script>
window.onload = function(){

var img = document.getElementsByTagName('img');
arrMyAttrib = new window.Array()

for(i=0;i<img.length;i++){

     
   if (img[i].title=="fst"){
      arrMyAttrib.push(img[i]);
    <!--   alert(arrMyAttrib[0].title); -->
   }
}

 alert(arrMyAttrib[0].title); <!--вынес сюда-->

}



  </script>
 </head>
<body>

<img width='50' height='50' title='fst' />
<img width='50' height='50' title='snd' />
<img width='50' height='50' title='trd' />
<img width='50' height='50' title='fth' />
<img width='50' height='50' title='ffth' />

<script type="text/javascript">
setTimeout(function() {alert("alert 2: "+arrMyAttrib[0].title)},2100)
</script>
</body>
</html>

frant32

30.08.2012 13:28

сделал сам вынес var arrMyAttrib=[] за пределы функции ))) начало работать , но хотелось бы узнать что я сделал ))))

frant32

30.08.2012 20:04

помогите разобратся почему не работает (((

<html>
 <head> 

 
<script type="text/javascript">

function appendLink(imgTitle){
var res = ['http://ya.ru','http://google.ru','http://ex.ua'];
var img = document.getElementsByTagName('img');
var imgArr = [];

  for(i=0;i<img.length;i++){
    if(img.title == imgTitle){
       imgArr.push(img[i]);
	   concretImg = imgArr[0]; 
	}
  } 

  var newLink = document.createElement('a');
  
  if(imgTitle == 'fst'){
     newLink.setAttribute('href',res[0]);
  }else if(imgTitle == 'snd'){
     newLink.setAttribute('href',res[1]);
  }else if(imgTitle == 'trd'){
     newLink.setAttribute('href',res[2]);
  }

 // alert('sdsd');  <-- до етих пор алерт работает 
  
  var td = concretImg.parentNode;
  td.removeChild(concretImg);
  td.appendChild(newLink);
  newLink.appendChild(concretImg);

// здесь алерт уже не работает ...
}

window.onload = function(){ 

appendLink('fst');
appendLink('snd');
appendLink('trd');

}

</script>
 
 </head>
<body>
<table border="1">
<td><img width='50' height='50' title='fst' src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></td>
<td><img width='50' height='50' title='snd' src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></td>
<td><img width='50' height='50' title='trd' src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></td>
</table>
</body>
</html>

срипт должен оборачивать картинку ссылкой по загрузке документа ()

frant32

30.08.2012 20:24

<html>
 <head> 

 
<script type="text/javascript">

window.onload = function (e){
var res = ['http://ya.ru','http://google.ru','http://ex.ua'];
var e = e || event;
var target = e.target || e.srcElement;

   if(target.title == 'fst'){
     window.location.assign(res[0]);
   }else if(target.title == 'snd'){
     window.location.assign(res[1]);
   }else if(target.title == 'trd'){
     window.location.assign(res[2]);
   }
}

</script>
 
 </head>
<body>
<table border="1">
<td><img width='50' height='50' title='fst' src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></td>
<td><img width='50' height='50' title='snd' src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></td>
<td><img width='50' height='50' title='trd' src = 'http://javascript.ru/forum/images/ca_serenity/misc/logo.gif' /></td>
</table>
</body>
</html>

решил попробовать так , тоже не получается ....
прошу помощи по обоим вариантам ))

Deff	30.08.2012 20:25

frant32,
if(img.title == imgTitle){
нет элемента - сравнивать можно элемент
img[i].title== imgTitle){
Вот эту конструкцию

Цитата:

if(imgTitle == 'fst'){
22 newLink.setAttribute('href',res[0]);
23 }else if(imgTitle == 'snd'){
24 newLink.setAttribute('href',res[1]);
25 }else if(imgTitle == 'trd'){
26 newLink.setAttribute('href',res[2]);

сделайте через switch - case http://learn.javascript.ru/switch

frant32

30.08.2012 20:30

Цитата:

Сообщение от Deff (Сообщение 201777)

frant32,
if(img.title == imgTitle){
нет элемента - сравнивать можно элемент
img[i].title== imgTitle){
Вот эту конструкцию

сделайте через switch - case http://learn.javascript.ru/switch

большое спасибо забыл что img является списком тегов))))

а через switch - case чем лутше ?
да и со вторым способом не поможете разобратся?

Deff	30.08.2012 20:40

Цитата:

Сообщение от frant32

а через switch - case чем лутше ?

Тем что понятней и вываливаешься сразу из каждой проверки -а не куча логических последовательных цепочек - через месяц - вы просто забудете что и к чему в этой логической цепочке и зачем она такая

Часовой пояс GMT +3, время: 16:19.