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, Jul 08 '13 at 09:45
yup, i sure about it ! because i load in jquery with ID tag succeessfully — Huei Tan, Jul 08 '13 at 09: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, Jul 08 '13 at 09:50
i try [0] but it said Uncaught TypeError: Cannot read property '0' of null — Huei Tan, Jul 08 '13 at 09:57
@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, Jul 08 '13 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, Jul 08 '13 at 10:07
I'm sure i have including jQuery because i used jQuery before this function ! — Huei Tan, Jul 08 '13 at 10:28

score 1 · Answer 1 · answered Jul 08 '13 at 09:48

1

Try:

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

answered Jul 08 '13 at 09:48

Andre

2,449
25
24

no =( it doesn't work, but trying $("#aaa") will success with ID tag – Huei Tan Jul 08 '13 at 09:56

score 1 · Answer 2 · 2013-07-08T10:06:35.213

1

I think that should work:

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

edited Jul 08 '13 at 10:06

answered Jul 08 '13 at 09:57

Sergio · Accepted Answer · 2013-07-08T10:17:36.027

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 08 '13 at 10:17

answered Jul 08 '13 at 10:03

Sergio

28,539
11
85
132

score 0 · Answer 4 · edited May 23 '17 at 12:29

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

jquery and native javascript simple DOM selector

4 Answers4