0

I am stuck in traversing in the jquery.

when i console.log($('image')); i will get as follows

<div class="product-img-box" id="image">
    <div id="wrap" style="top:0px;z-index:1;position:relative;"><a href="mydomain.com/media/catalog/product/c/e/ceramic_straightner_-_s3_red_black_1_1.jpg" class="cloud-zoom" id="zoom" rel="zoomWidth:'330', zoomHeight:'330', position:'right', adjustX:0, adjustY:0, lensOpacity:0.5, smoothMove:3, showTitle:'true', titleOpacity:0.5" style="position: relative; display: block;">
        <img src="mydomain.com/media/catalog/product/cache/1/image/550x550/9df78eab33525d08d6e5fb8d27136e95/c/e/ceramic_straightner_-_s3_red_black_1_1.jpg" alt="Ceramic Straightner" style="width: 550px; display: block;" title="">
        </a><div class="mousetrap" style="z-index: 999; position: absolute; width: 456px; height: 456px; left: 0px; top: 0px; cursor: move; background-image: url(mydomain.com/index.php/straighteners/);"></div></div>
    </div>

I am trying to traverse to the img tag.how can i access.

4
  • console.log($('image')); or console.log($('#image')); May 23, 2015 at 12:28
  • 1
    use jquery find method.
    – u_mulder
    May 23, 2015 at 12:28
  • 2
    You can use console.log($('#image img')); May 23, 2015 at 12:28
  • console.log($('image')) May 23, 2015 at 12:31

3 Answers 3

1

You want the img element selector

$('img')

or

$('#image img')

console.log($('#image img'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="product-img-box" id="image">
    <div id="wrap" style="top:0px;z-index:1;position:relative;"><a href="mydomain.com/media/catalog/product/c/e/ceramic_straightner_-_s3_red_black_1_1.jpg" class="cloud-zoom" id="zoom" rel="zoomWidth:'330', zoomHeight:'330', position:'right', adjustX:0, adjustY:0, lensOpacity:0.5, smoothMove:3, showTitle:'true', titleOpacity:0.5" style="position: relative; display: block;">
        <img src="mydomain.com/media/catalog/product/cache/1/image/550x550/9df78eab33525d08d6e5fb8d27136e95/c/e/ceramic_straightner_-_s3_red_black_1_1.jpg" alt="Ceramic Straightner" style="width: 550px; display: block;" title="">
        </a><div class="mousetrap" style="z-index: 999; position: absolute; width: 456px; height: 456px; left: 0px; top: 0px; cursor: move; background-image: url(mydomain.com/index.php/straighteners/);"></div></div>
    </div>

3
  • no its $('image') only.returing html on console.log with $('image') May 23, 2015 at 12:32
  • @PradeepSanku, see my code snippet. It is working. Let me know if you meant something else
    – AmmarCSE
    May 23, 2015 at 12:35
  • am using jquery zoom plugin in which the html has been assigend to $('image') thats why on console.log i m getting html May 23, 2015 at 12:37
1

You can try:

$("#image").find("img");
0

$("#image img"); or $("#image").find("img");

While usually the second one is faster, because it is converted to original Javascript code: document.getElementById("image").getElementsByTagName("img");.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.