создаются лишние <br> и не удаляются

264

25 мая 2017, 10:07

Есть код

   function addBr() { 
        if ($(window).width()<=750) { 
            $('.journal img').each(function () { 
 
                if ($(this).not('br')) { 
                    $(this).after('<br>'); 
                    alert('<br> созданы'); 
                } 
                else { 
                    return false; 
               } 
        }) 
    } 
 
    else { 
        $('.journal').each().remove('br'); 
    } 
} 
     
$(window).load(addBr); 
$(window).resize(addBr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="journal"> 
<p><span>1</span><img src="img/file1.png" alt=""> учебных журнала в месяц</p> 
</div> 
 
 <div class="journal"> 
<p><span>2</span><img src="img/file2.png" alt=""> учебных журнала в месяц</p> 
</div> 
 
 <div class="journal"> 
<p><span>3</span><img src="img/file3.png" alt=""> учебных журнала в месяц</p> 
</div>

помогите разобраться, почему при каждом изменении размера окна,
создаются снова и снова. и при изменения окна большую от 750px сторону
не удаляется

Answer 1

Во-первых, вы неправильно проверяли на следующий элемент. Вам нужно жестко проверять, <br> ли следующий элемент: $(this).next().prop("tagName") !== "BR".

Во-вторых, в документации есть примеры по .each(). Туда пребуется передать функцию и удалять элементы.

В-третьих, я не понимаю зачем вам вообще такой солюшн.

Вот конкретно решение по вашему вопросу:

function addBr() { 
  if ($(window).width() <= 750) { 
    $('.journal img').each(function() { 
      if ($(this).next().prop("tagName") !== "BR") { 
        $(this).after('<br>'); 
      } else { 
        return false; 
      } 
    }) 
  } else { 
    $('.journal br').each(function() { 
      $(this).remove() 
    }); 
  } 
} 
 
$(window).load(addBr); 
$(window).resize(addBr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="journal"> 
  <p><span>1</span><img src="img/file1.png" alt=""> учебных журнала в месяц</p> 
</div> 
 
<div class="journal"> 
  <p><span>2</span><img src="img/file2.png" alt=""> учебных журнала в месяц</p> 
</div> 
 
<div class="journal"> 
  <p><span>3</span><img src="img/file3.png" alt=""> учебных журнала в месяц</p> 
</div>

Как вариант с media query:

@media (min-width: 750px) { 
  .hide-large { 
    display: none; 
  } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="journal"> 
  <p><span>1</span><img src="img/file1.png" alt=""><br class="hide-large"> учебных журнала в месяц</p> 
</div> 
 
<div class="journal"> 
  <p><span>2</span><img src="img/file2.png" alt=""><br class="hide-large"> учебных журнала в месяц</p> 
</div> 
 
<div class="journal"> 
  <p><span>3</span><img src="img/file3.png" alt=""><br class="hide-large"> учебных журнала в месяц</p> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Треугольник адаптивно?

Подскажите пожалуйста, как сделать блок с текстом как на картинке, чтобы если текст расширяет блок триугольник растягивался вместе с блоком

364

MySQL

Выборка из нескольких таблиц SQL

297

MySQL

Удалить дубли из таблицы mysql

Здравствуйте, есть таблица (40К записей)Есть дублирующие записи

482

MySQL

Как скопировать данные одной таблицы в другую?

Имеется две идентичные таблицы, пусть table1, table2, но одна таблица заполнена данными, а вторая только наполовинуВ таблицах есть такие поля: id, user_id,...

290