2

Всем привет.

Есть HTML код:

<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test1-550x550.jpg" alt="Test Imgage 1" />

<h3 class="title"><a href="http://www.site.com/bla1">Title Test</a></h3>
<img width="550" height="550" src="http://www.site.com/images/image_test2-550x550.jpg" alt="Test Imgage 2" />

Задача. Нужно при загрузке страницы, заменить в теге src текст 550x550 на 300x200 Далее нужно заменить ширину и высоту на 300 и 200

Результат должен быть такой:

<h3 class="title"><a href="http://www.site.com/bla0">Title Test</a></h3>
<img width="300" height="200" src="http://www.site.com/images/image_test1-300x200.jpg" alt="Test Imgage 1" />

Как я понимаю логика должна быть такова, мы находи класс title, потом ищем следующим за ним элемент img, находим его src и делаем замену. Но как все это сделать при загрузке странице ? максимум что мне удалось сделать, это вот это

$('title').next().each(function() {
var test = $(this).find('img').attr('src').replace("550x550","300x200");
alert(test);
});

Но как я понимаю евент должен отправлятся первей чем загрузится страница, что бы изображения уже подгружались с 300x200 даже ставил вместо var test, return, все равно не заменяет, вот тут не пойму почему (я только начал изучать js) очень интересно, но некоторые моменты не очень понятны.

Так же хотел бы знать нет ли у данного метода каких то подводных камней ? при работе с браузерами ?

Спасибо

2 ответа 2

2
  1. Можно искать, используя соседние селекторы.
  2. Можно менять несколько атрибутов сразу.
  3. Чтобы обойтись без метода .each(), можно вычислять новые значения атрибутов колбэк-функцией. (Спасибо @Grundy за науку.)
  4. Чтобы охватить несколько классов, добавьте селекторы с ними через запятую.

$(document).ready(function() {
  $( '.title1+img,.title2+img,.title3+img' ).attr({
    src: function( i, val ) {
      return val.replace('550x550','300x200');
    },
    width: 300,
    height: 200
  });
});
<h3 class="title1"><a href="http://www.site.com/bla1">Title 1</a></h3>
<img width="550" height="550" src="//placehold.it/550x550/936/fff/" alt="Image 1" />

<h3 class="title2"><a href="http://www.site.com/bla2">Title 2</a></h3>
<img width="550" height="550" src="//placehold.it/550x550/693/fff/" alt="Image 2" />

<h3 class="title3"><a href="http://www.site.com/bla3">Title 3</a></h3>
<img width="550" height="550" src="//placehold.it/550x550/369/fff/" alt="Image 3" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

6
  • тут each Тоже не нужен
    – Grundy
    11 июл 2017 в 11:30
  • @Grundy Поясните, пожалуйста, как без each прогнать replace по атрибуту каждого элемента в отдельности? У них же src разные... 11 июл 2017 в 12:34
  • 1
    Например так подходит и для объекта. Суть в том, что each уже скрыт в большинстве методов jquery и его нет нужды вызывать явно.
    – Grundy
    11 июл 2017 в 12:35
  • @Grundy Спасибо! Обновил ответ. 11 июл 2017 в 12:46
  • 1
    @webstackoverload Можно перечислить селекторы с несколькими классами через запятую. Обновил код в ответе. 12 июл 2017 в 19:30
1

Надо запускать при событии ready. В этот момент структура DOM уже сформирована, но еще никакие изображения не загружены.

Функция .replace заменяет текст в строке, но не в атрибутах. Надо получить сначала атрибут src в строку, преобразовать ее, а потом записать назад, указав вторым аргументом в .attr().

$(document).ready(function() {
  $('.title').next().each(function() {
    var src = $(this).find('img').attr('src');
    src = src.replace("550x550","300x200");
    $(this).find('img').attr('src', src);
  });
});
10
  • Cпасибо за развернутый ответ, логику понял. Это главное, просто не мог понять как обратно вставить из переменной с результатом обратно в src. Я просто равнялся на один пример, который сразу находит класс (дива) а в нем элемент src, и потом по return заменяет его аттрибут, кода две строчки, думал сдесь можно провернуть тоже самое, но видать нет, так как тут идет поиск второго элемента. 11 июл 2017 в 10:12
  • Если ответ полезен, его стоит отметить как принятый галочкой внизу. Это поможет ориентироваться пользователям, которые ищут ответ на подобный вопрос. 11 июл 2017 в 10:13
  • Спасибо, я бы и не заметил ее если бы не сказали. :) 11 июл 2017 в 10:27
  • Да, не очень видна галка. Я обычно новым пользователям потому и напоминаю. 11 июл 2017 в 10:32
  • @GlebKemarsky спасибо, поправил. 11 июл 2017 в 10:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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