1

Как известно, когда мы с помощью add() добавляем элементы в jQuery-объект, они становятся элементами массива. Но что, если там нужно, чтобы этот объект был единым целым?

Я приведу пример, когда это нужно, но вероятно, вопрос разветвится на два обсуждения. Допустим у нас есть следующие разнородные элементы:

<h1 class="heading-h1"></h1>
<div class="subheading-h1"><div>
<div class="par-group">
    <p>Эх, жирафы честно в цель шагают, да щук объять за память ёлкой...</p>
</div>
<ul>
    <li>><li>
    <li></li>
</ul>

Все родительские объекты добавим в jQuery-объект:

var jQueryObj = $([]).add('.heading-h1').add('.subheading-h1').add('.par-group').add('ul');

Если мы сделаем что-то вроде

jQueryObj.replaceWith('<div>Новое содержимое</div>');

то на новое содержимое заменится каждый элемент массива. Нам же нужно, чтобы на одно <div>Новое содержимое</div> заменился весь приведённый выше HTML-код. Как этого достичь?

2 ответа 2

1

Можно всегда заменять первый элемент, а остальные удалять.

Хотя в целом ваш подход мне кажется не универсальным, потому что в вашем примере элементы идут подряд, что будет если между ними будет какой-нибудь еще элемент?

$(function() {
  var $elements = $('.el1');
  
  $.merge($elements, $('.el2'));
  
  $('button').click(function() {
    $elements.first().replaceWith('<div class=el3>3</div>');
    $elements.slice(1).remove();
  });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class=el1>1</div>
<div class=el1>1</div>
<div class=el1>1</div>
<div class=el1>1</div>
<div class=el2>2</div>
<div class=el2>2</div>
<div class=el2>2</div>
<div class=el2>2</div>
<div class=el2>2</div>
<div class=el4>4</div>
<div class=el4>4</div>
<div class=el4>4</div>


<button>replace "1" and "2" with "3"</button>

1
  • Конкретно Ваше решение оказалось наиболее простым и понятным. Так называемый "мой метод" - это просто специализированная задача, но в общем случае, как сказал Станислав, допускать подобных ситуаций действительно не стоит. Commented 26 апр. 2017 в 5:24
1

Очевидно, что работая с элементами как с массивом, вы получаете работу как с массивом. Вам же самый простой способ - это подняться на уровень выше, к родителю этих элементов, и заменить содержимое родителя одним махом, безо всяких добавлений элементов:

$("#parent-div").html('<div>Новое содержимое</div>');

Если такое невозможно из-за того, что родитель содержит что-то еще, помимо этого, то с одной стороны лично я сказал бы, что это методологически неверно, и скорее всего надо сверстать иначе, а с другой стороны, тогда ничего не остается, кроме как удалять эти элементы поочередно (см. примечание) и потом опять же в родитель инжектить нужный вам новый код с помощью append() / prepend().


Есть несколько способов найти и удалить их, как через родителя, так и обращаясь напрямую. Можно использовать и ваш вариант, через что-то вроде jQueryObj.each().remove(), после чего делать все тот же append() / prepend().

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.