2012-06-06 1 views
0

У меня есть переменное число элементов с одинаковым именем класса:Как использовать JQuery ReplaceWith заменить переменное число элементов

<p class="test"></p> 
<p class="test"></p> 

Я хочу, чтобы заменить каждый из них с новым набором элементов с тем же классом имя, но не может быть больше или меньше элементов:

<p class="test"></p> 

или

<p class="test"></p> 
<p class="test"></p> 
<p class="test"></p> 

Если я использую $('p.test').replaceWith('new content'), он заменит каждый элемент содержимым, поэтому я не могу этого сделать.

Каков наилучший способ для этого?

EDIT (другое объяснение):

Так что эти элементы на странице:

<p class="test"></p> 
<p class="test"></p> 
<p class="test"></p> 

Затем я динамически получить новый набор элементов (переменное число из них), которые имеют то же имя класса (и, возможно, некоторые другие имена классов). Например:

<p class="test classa"></p> 
<p class="test classb"></p> 

В приведенном выше примере, я хочу, чтобы первые три <p> элементы пропадут. И на их месте должны быть 2 динамически удаленных элемента <p>.

Имейте в виду, что количество элементов любого набора может отличаться.

+1

Почему они имеют один и тот же класс? Если вы хотите, чтобы у каждого были разные элементы, вы должны использовать разные идентификаторы. Или добавьте новые элементы на лету с помощью jquery. Я не совсем понимаю ваш вопрос, не могли бы вы объяснить немного лучше? Спасибо :) –

+0

Они имеют один и тот же класс, потому что это то, как они оформлены (не то, что я контролирую). Я не могу добавить идентификаторы, потому что у меня нет возможности изменить разметку. Я мог бы '.remove()' и '.append()', если это мой единственный вариант, но мне было любопытно более элегантное решение. – fehays

+0

Добавлен новый ответ, возможно, это поможет вам –

ответ

0

Обновлено:

если у вас есть ваш <p>'s в контейнер

<div id="container"> 
    <p class="test"></p> 
    <p class="test"></p> 
    <p class="test"></p> 
    <p class="test"></p> 
</div> 

Вы можете удалить их , и добавить (или добавить) новые элементы

$('p.test').remove(); //Will remove all <p>'s with class test 

Я предполагаю, что ваш новый комплект из элементов в данных массива

var data= { 
    '1': '<p class="newclass">Hello</p>', 
    '2': '<p class="newclass2">Hello2</p>' 
    '3': '<p class="newclass3">Hello3</p>' 
    }; //Could have 100 rows, it wouldn't matter 

$.each(data, function(i,val){ 
     //Do some stuff 
     $('#container').append(val); 
    }); 
+0

Спасибо, однако, это не сработает, потому что, если в селекторе «p.test» есть три элемента, они заменят каждый на «новый контент». и «новым контентом» может быть любое количество элементов «p.test». Надеюсь, это имеет смысл. – fehays

+0

Позвольте мне посмотреть, могу ли я получить его, вы хотите заменить элемент другим элементом? Можете ли вы объяснить себе немного больше? Используйте примеры, если вы можете :) –

+0

Нет, я хочу заменить многие элементы новым набором элементов, которые извлекаются динамически. Я думал, что мой пример в вопросе достаточно хорош, но я постараюсь его обновить. – fehays

0

$ ('p.test') является массивом, вы можете цикл в нем

+1

Технически, это объект jQuery, а не массив. –

0

я бы окружающие <div> и просто заменить, что DIV с новым набором элементов каждый раз. Итак:

<div id="surround"> 
    <p class="test"></p> 
    <p class="test"></p> 
    <p class="test"></p> 
</div> 

Тогда JQuery:

$("#surround").replaceWith('new content'); 
+0

У меня нет доступа для изменения разметки, поэтому я не могу добавить окружающий div: / – fehays