如何从内部获取价值 <li> 元素并使用jQuery将其放入图像属性标记

Question

I want to get the value from H3 element and put it to image attribute such as title and alt. please see my code below.

 $('ul.products').each(function() { $(this).find('li h3').each(function() { var current = $(this); if (current.children().size() > 0) { return true; } console.log($(this).text()); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="products"> <li> <a href="#"> <img src="/path/" title="(Get value from h3)" alt="(Get value from h3)"> </a> <h3>Mytitle1</h3> </li> <li> <a href="#"> <img src="/path/" title="(Get value from h3)" alt="(Get value from h3)"> </a> <h3>Mytitle2</h3> </li> <li> <a href="#"> <img src="/path/" title="(Get value from h3)" alt="(Get value from h3)"> </a> <h3>Mytitle3</h3> </li> </ul> 

Answer 1

Try this:

$(".products li").each(function() { // loop through all the li
  var txt = $(this).find("h3").text(); // find the h3 tag and get its  text
  $(this).find("img").attr("title",txt); // set title of image
  $(this).find("img").attr("alt",txt); // set alt of image
});

Answer 2

Try:

$('ul.products').each(function(){
    $(this).find('li h3').each(function(){//loop the h3
          $(this).prev('a').find('img').attr({'title':$(this).text(),'alt':$(this).text()});//get the image usin prev and find add the atributes to it
    });

});

demo

Answer 3

You can use prev to find the previous a tag and find to find the img element & then use attr to add the attributes

 $(this).prev('a').find('img').attr({
              'title':_getText,
              'alt':_getText
              }) 

jsfiddle

Answer 4

 $(function() { $('.products li').each(function() { var item = $(this); var text = item.find('h3').text(); item.find('img').attr({ 'title': text, 'alt': text }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul class="products"> <li> <a href="#"><img src="/path/" title="(Get value from h3)" alt="(Get value from h3)"> </a> <h3>Mytitle1</h3> </li> <li> <a href="#"><img src="/path/" title="(Get value from h3)" alt="(Get value from h3)"> </a> <h3>Mytitle2</h3> </li> <li> <a href="#"><img src="/path/" title="(Get value from h3)" alt="(Get value from h3)"> </a> <h3>Mytitle3</h3> </li> </ul>