CODEWITHSUNDEEP
jquerycss
Nere
Nere

Reputation: 4097

add class to img tag in specific div

Here is my sample div:

<div id="question-display">
    <img src="/assets/img/sample.png" /> //Line 1
    <img src="/assets/img/sample.png" /> //Line 2
    <img src="/assets/img/sample.png" /> //Line 3
</div>

How I can use jquery such as:

$('img').addClass('img-responsive');

and add class img-responsive to img tag in div id="question-display"

My expected output after use jquery:

<div id="question-display">
    <img class="img-responsive" src="/assets/img/sample.png" />  //Line 1
    <img class="img-responsive" src="/assets/img/sample1.png" /> //Line 2
    <img class="img-responsive" src="/assets/img/sample2.png" /> //Line 3
</div>

Upvotes: 0

Views: 4693

Answers (2)

rafaelc
rafaelc

Reputation: 59274

Get img inside element with id 'question-display'

$('#question-display img').addClass('img-responsive');

Upvotes: 3

AmmarCSE
AmmarCSE

Reputation: 30557

Select img descendants by putting a space

$('#question-display img').addClass('img-responsive');

If you wish to target direct descendants, then use a >

$('#question-display > img').addClass('img-responsive');


$('#question-display img').addClass('img-responsive');
.img-responsive{
  border:1px solid green;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="question-display">
    <img src="/assets/img/sample.png" /> 
    <img src="/assets/img/sample.png" /> 
    <img src="/assets/img/sample.png" /> 
</div>

Upvotes: 0

Related Questions