jquery and native javascript simple DOM selector

Question

This is my html code

<div class="class_test" id="id_test">
<h2>testing</h2>
<img/>
<div class="rightBox">
<h4>test</h4>
<p>test</p>
</div>
</div>

in javascript code, i want to select img to set it's src , height , width

$("#id_test > img").src = "blablabla.jpg";
$("#id_test > img").height = "100";
$("#id_test > img").width = "100";

but it doesn't work

Where did i miss it ?

Otherwise, how do i use the native javascript code without using jquery

document.getElementById("blabla")

i don't want to set the img ID

Are you sure that you set those properties (src, height, width) after the whole document is loaded? — Kamil T
– Kamil T, Commented Jul 8, 2013 at 9:45
yup, i sure about it ! because i load in jquery with ID tag succeessfully — Huei Tan
– Huei Tan, Commented Jul 8, 2013 at 9:48
$("#id_test > img") is array like object . to access first you should use this way $("#id_test > img")[0].src .. or use attr which loop items and set properties .. in behind it's iterate elements — rab
– rab, Commented Jul 8, 2013 at 9:50
@Huei try this ..if ( $("#id_test > img").length > 0 ) { $("#id_test > img")[0].src = "blablabla.jpg" } .. check length is greater than 0 .. if you not pass correct selector query . it's length is 0 — rab
– rab, Commented Jul 8, 2013 at 10:00
@Huei: If you get that error, then $ does not refer to jQuery. jQuery would never return null. If you want to use jQuery, make sure it's loaded. — Felix Kling
– Felix Kling, Commented Jul 8, 2013 at 10:07

Sergio · Accepted Answer · 2013-07-08 10:17:36Z

1

FIDDLE

Width jQuery:

$("#id_test > img").prop('src','http://jsfiddle.net/favicon.png');
$("#id_test > img").prop('height','100');
$("#id_test > img").prop('width','100');

Width javascript

var elm = document.getElementById('id_test');
var first = elm.getElementsByTagName("img")[0];
first.src = "http://jsfiddle.net/favicon.png";
first.style.height = '100px';
first.style.width = '100px';

edited Jul 8, 2013 at 10:17

answered Jul 8, 2013 at 10:03

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andre · Accepted Answer · 2013-07-08 09:48:49Z

1

Try:

$("#id_test > img").attr('src',"blablabla.jpg").attr('height',"100").attr('width',"100");

answered Jul 8, 2013 at 9:48

Andre

2,46726 silver badges25 bronze badges

1 Comment

Huei Tan Over a year ago

no =( it doesn't work, but trying $("#aaa") will success with ID tag

score 1 · Accepted Answer · 2013-07-08 10:06:35Z

1

I think that should work:

$('#id_test').find('img').attr({ 'src': 'blablabla.jpg', 'height': 100, 'width': 100});

edited Jul 8, 2013 at 10:06

answered Jul 8, 2013 at 9:57

user2549616

Comments

Community · Accepted Answer · 2017-05-23 12:29:00Z

jQuery returns array like object .. eg : $("#id_test > img") returns the following array

[<img/>,<img />, ...]

For accessing it you can loop them using for, while .. or jQuery each method .

$("#id_test > img")[0] -> is Dom

Changing it will reflects into Dom .. But you should care your selector passing . If selector is not valid one .. jQuery Object.length is 0

see difference between property and attribute on question Properties and Attributes in HTML

var imgs =  $("#id_test > img");

// set first item ..    
if ( imgs.length > 0 ) {
    imgs[0].src = 'your src';

}

// set all items
if ( imgs.length > 0 ) {

    for ( var i= 0; i < imgs.length ; i++ ){
        imgs[i].src = 'your src'; // src is property
    } 
}

The best way is to use jQuery prop method . Which set src property for all items , same like above for loop code .jQuery is safe for working on different browsers

imgs.prop('src','your src') // or pass json params

In hehind loop each item ,... and set properties

Collectives™ on Stack Overflow

jquery and native javascript simple DOM selector

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related