通过jQuery用它的索引替换html元素

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 ?

Answer 1

$('.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 div s inside of it.

---

Also if you have div s inside of your div s, 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. =]

Answer 2

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

Answer 3

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

Answer 4

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