如何使用JQuery将一个html属性的值更改为不同的属性值？

Question

使用JQuery在文档加载时，我试图选择每个<img>并给它一个新属性title并将其设置为等于属性alt的值。 title是用户在元素上悬停时出现在工具提示中的内容。使用控制台，我似乎能够有效地选择每个元素，但是当我将它们放在一起时，似乎出现了一些问题。

的HTML：

<ul class="list"> 

<li><img href="#" src="url" data-toggle="tooltip" data-placement="right" alt="first-tooltip"></li> 

<li><img href="#" src="url" data-toggle="tooltip" data-placement="right" alt="second-tooltip"></li> 

<li><img href="#" src="url" data-toggle="tooltip" data-placement="right" alt="third-tooltip"></li> 

</ul> 

的JS：

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); //enable tooltips 

    $('.list li').children().each(function(){ //perform function on each <a> 
     var thisAltText = $(this).attr('alt'); //select the alt value 
     $(this).attr('title', thisAltText); //set title value to equal alt value 
    }); 
}); 

正如你所看到的，这是行不通的：http://codepen.io/shawnmurtagh/pen/ZpVgkz

仅供参考 - 我使用.children()，因为我需要选择不同的列表项在我的实际项目中。

Answer 1

尝试这样

$(".list li").each(function() { 
    var thisAltText = $(this).children().attr('alt'); 
    $(this).children().attr('title', thisAltText); 
}); 

或者

$(".list li a").each(function(index) { 
    var thisAltText = $(this).attr('alt'); 
    $(this).attr('title', thisAltText); 
}); 

或者

$(".list li").each(function(index) { 
    var thisAltText = $(this).find('img').attr('alt'); 
    $(this).find('img').attr('title', thisAltText); 
}); 

或者

$(".list").children().each(function(index) { 
    var thisAltText = $(this).find('img').attr('alt'); 
    $(this).find('img').attr('title', thisAltText); 
}); 

在这里打球https://jsfiddle.net/47jgmzju/

Answer 2

做这样的：

$(document).ready(function(){ 
     $('.list li').children().each(function(){ //perform function on each <a> 
      var thisAltText = $(this).attr('alt'); //select the alt value 
      $(this).attr('title', thisAltText); //set title value to equal alt value 
     }); 
     $('[data-toggle="tooltip"]').tooltip(); //enable tooltips 
    });