Replace an html element with it's index via jQuery

Question

I'm trying to replace an HTML element i get via it's index, I'm trying this but it won't work:

<div class="results">
    <div id="61">Result 1 content</div>
    <div id="8762">Result 2 content</div>
    <div id="234">Result 3 content</div>
</div>

<script>
    var index = 0;
    var html = '<div id="243">Result 1 content</div>';
    var element = $('.results').get(index);
    element.replaceWith(html);
</script>

how can I replace an entire HTML element by getting it by it's index?

Why are you replacing an entire element just to change its ID? — I Hate Lazy
– I Hate Lazy, Commented Nov 4, 2012 at 21:47
Oh yea, just pollute the global namespace with all those variables. I'm sure nothing can go wrong. :P (Use a function wrapper, for crying out loud.) — Šime Vidas
– Šime Vidas, Commented Nov 4, 2012 at 21:51
this is just an example, I need to do it by each or via for depending by the situation, sometimes i get a list of results via JSON and i need to replace the elements starting by the 0 to the ##. In other cases i just need to update them in runtime. — vitto
– vitto, Commented Nov 4, 2012 at 22:01
I assume the element which you want to replace is a child of the .results element, if it is not or if you need help adapting the function to work with your use case give a holler. — Fabrício Matté
– Fabrício Matté, Commented Nov 4, 2012 at 22:05
get() will get the native DOM element, which does'nt have a replaceWith method as it's not a jQuery object. — adeneo
– adeneo, Commented Nov 4, 2012 at 22:25

Fabrício Matté · Accepted Answer · 2012-11-04 21:59:08Z

4

$('.results div').eq(index).replaceWith(html);

Fiddle

You should use .eq() to filter the set of matched elements inside a jQuery object by its index. Also $('.results') only has 1 element (itself). I assume you're looking for the divs inside of it.

Also if you have divs inside of your divs, use the more specific child selector:

$('.results > div').eq(index).replaceWith(html);

Which has the same effect as using the .children method with a selector filter:

$('.results').children(':eq(' + index + ')').replaceWith(html);

Or more simply, concatenating it all in a single selector:

$('.results > div:eq(' + index + ')').replaceWith(html);

Fiddle

There are many other ways to get this done with jQuery, but these should be more than enough. =]

edited Nov 4, 2012 at 21:59

answered Nov 4, 2012 at 21:46

Fabrício Matté

70.3k27 gold badges135 silver badges168 bronze badges

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

Comments

freejosh · Accepted Answer · 2012-11-04 21:47:13Z

1

.get retrieves the DOM element at the index. What you're looking for is .eq

answered Nov 4, 2012 at 21:47

freejosh

11.4k4 gold badges36 silver badges47 bronze badges

Comments

ilan berci · Accepted Answer · 2012-11-04 21:48:37Z

0

var index = 0
$($('.results div')[index]).replaceWith('<div id="243">Result 1 content</div>')

answered Nov 4, 2012 at 21:48

ilan berci

3,8791 gold badge18 silver badges21 bronze badges

Comments

netdjw · Accepted Answer · 2012-11-04 21:49:56Z

0

var element = $('.results').find('div');

answered Nov 4, 2012 at 21:49

netdjw

6,10126 gold badges108 silver badges188 bronze badges

Collectives™ on Stack Overflow

Replace an html element with it's index via jQuery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related