CODEWITHSUNDEEP
jqueryhtmlhtml-liststraversal
Dreteh
Dreteh

Reputation: 387

Jquery: Traversing li and get element within

This question seems easy but I just can't get it right.

<ul id="myUL">
   <li id="item1">
      <select class="partDesc"><option>Front</option><option>Rear</option></select>
      <input type="text" class="itemDesc">
      <img src="images/myimg.jpg" class="itemImg" > 
   </li>
   <li id="item2">
      <select class="partDesc"><option>Front</option><option>Rear</option></select>
      <input type="text" class="itemDesc">
      <img src="images/myimg.jpg" class="itemImg" > 
   </li>
</ul>

These <li> items are dynamically added using jquery. I want to traverse these <li> items and get all the inputs, including selected value from partDesc, text from itemDes and src from itemImg.

Here is where I stuck:

$("#myUL li").each(function() {<br>
    var partDesc = $(this).??;<br>
    var itemDesc = $(this).??;<br>
    var itemImg = $(this).??;<br>
 });

Thank you for reading.

Upvotes: 3

Views: 10282

Answers (2)

Baruch
Baruch

Reputation: 21508

$("#myUL li").each(function() {
    var partDesc = $(this).children("select:selected").text();
    var itemDesc = $(this).children("input").val();
    var itemImg = $(this).children("img").attr("src");
});

Upvotes: 1

Zain Shaikh
Zain Shaikh

Reputation: 6043

following script should help you. here is the demo

$("#myUL li").each(function() {
    var partDesc = $(this).find('.partDesc').val();
    var itemDesc = $(this).find('.itemDesc').val();
    var itemImg = $(this).find('.itemImg').attr('src');
    alert('partDesc: '+partDesc);
    alert('itemDesc: '+itemDesc );
    alert('itemImg: '+itemImg );
});

Upvotes: 4

Related Questions