javascript - Jquery to get parent div image source - Stack Overflow

admin管理员组

文章数量:1313371

My Html goes like this,

<div>
    <div>
        <input id="20171" name="StyleID" type="checkbox" value="true"><input name="StyleID" type="hidden" value="false">
    </div>
    <div class="imgContainer" style="padding-left: 3px; font-size: 18px; float:left;">
        <img src="http://localhost:61137/Images/8501.jpg" width="150px" height="150px">
    </div>
    <div>
        <span id="1002" class="ImagePlating"></span>
        <span id="1003" class="ImagePlating"></span>
        <span id="1004" class="ImagePlating"></span>
        <span id="1005" class="ImagePlating"></span>
    </div>    
</div>

...

<div >
    <div >
        <input id="20162" name="StyleID" type="checkbox" value="true">
        <input name="StyleID" type="hidden" value="false">
    </div>
    <div class="imgContainer" style="padding-left: 3px; font-size: 18px; float:left;">
        <img src="http://localhost:61137/Images/8498.jpg" width="150px" height="150px">
    </div>
    <div style="padding-left: 3px; font-size: 18px; float:left;">
        <span id="1002" class="ImagePlating"></span>
        <span id="1003" class="ImagePlating"></span>
        <span id="1004" class="ImagePlating"></span>
        <span id="1005" class="ImagePlating"></span>
        <span id="1006" class="ImagePlating"></span>
        <span id="1007" class="ImagePlating"></span>
    </div>
</div>

On click of the span I am trying to change the source for the div with class "imgContainer", also trying to get the Id of the parent div's checkbox with the following Jquery.

$(".ImagePlating").on("click", function (e) {
  $(this).parent()
         .sibilings()
         .find('.imgContainer')
         .child()
         .attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $(this).parent()
                  .find('input[type='checkbox']')
                  .attr('id');
});

However I am not sure how can I achieve that using JQuery, the above Jquery which I tried looks wrong.

My Html goes like this,

<div>
    <div>
        <input id="20171" name="StyleID" type="checkbox" value="true"><input name="StyleID" type="hidden" value="false">
    </div>
    <div class="imgContainer" style="padding-left: 3px; font-size: 18px; float:left;">
        <img src="http://localhost:61137/Images/8501.jpg" width="150px" height="150px">
    </div>
    <div>
        <span id="1002" class="ImagePlating"></span>
        <span id="1003" class="ImagePlating"></span>
        <span id="1004" class="ImagePlating"></span>
        <span id="1005" class="ImagePlating"></span>
    </div>    
</div>

...

<div >
    <div >
        <input id="20162" name="StyleID" type="checkbox" value="true">
        <input name="StyleID" type="hidden" value="false">
    </div>
    <div class="imgContainer" style="padding-left: 3px; font-size: 18px; float:left;">
        <img src="http://localhost:61137/Images/8498.jpg" width="150px" height="150px">
    </div>
    <div style="padding-left: 3px; font-size: 18px; float:left;">
        <span id="1002" class="ImagePlating"></span>
        <span id="1003" class="ImagePlating"></span>
        <span id="1004" class="ImagePlating"></span>
        <span id="1005" class="ImagePlating"></span>
        <span id="1006" class="ImagePlating"></span>
        <span id="1007" class="ImagePlating"></span>
    </div>
</div>

On click of the span I am trying to change the source for the div with class "imgContainer", also trying to get the Id of the parent div's checkbox with the following Jquery.

$(".ImagePlating").on("click", function (e) {
  $(this).parent()
         .sibilings()
         .find('.imgContainer')
         .child()
         .attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $(this).parent()
                  .find('input[type='checkbox']')
                  .attr('id');
});

However I am not sure how can I achieve that using JQuery, the above Jquery which I tried looks wrong.

• javascript
• jquery

Share Improve this question Follow edited Jul 18, 2014 at 9:35 zessx 68.8k2929 gold badges138138 silver badges164164 bronze badges asked Jul 18, 2014 at 9:30 TBATBA 1,19755 gold badges4646 silver badges8383 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Try below code : Use parent() to get parent div and then use prev() to find previous element with class="imgContainer" and change src. Use same $imageContainer and prev() to find checkbox.

Also use double quotes for type="checkbox"

$(".ImagePlating").on("click", function (e) {
  var $imageContainer = $(this).parent().prev('.imgContainer');
  $imageContainer.find('img').attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $imageContainer.prev().find('input[type="checkbox"]').attr('id');
});

Use

$(".ImagePlating").on("click", function (e) {
  $(this).parent()
         .prev('.imgContainer') //Image container is not a sibling
         .find('img')
         .attr("src", "http://localhost:61137/Images/Img-Loading.gif");
  var id = $(this).parent()
                  .find('input[type='checkbox']')
                  .attr('id');
});

You can use like this

$(".ImagePlating").click(function () {
     $(this).parent().prev().find("img").attr("src", "new src");

});

.prev() will select the element just above it. Then using find() you can find the children.

本文标签： javascriptJquery to get parent div image sourceStack Overflow