Создайте <img>из файлов в папке и примените стиль css к img или контейнеру (на основе имени файла) - (Javascript / JQuery / PHP?)

Question

Можно ли применить класс CSS к <img> или его контейнеру <div> с javascript или JQuery, основываясь на имени файла <img> sr c?

Не могли бы вы назначить (уже существующий) класс CSS для <img src="...-A.jpg"> или его родителя <div>, когда, например, A присутствует в имени файла?

Чтобы добавить к этой идее
Можно ли будет не только автоматически применять стиль, но и создать целый тег <img>? В идеале у меня были бы разные страницы проекта, на которых я бы связывал папку с изображениями, например images / project-1 с <div id="image-container">.

Не могли бы вы использовать Javascript для создать последующую структуру <div><img/></div> в родительском контейнере <div>? Или это должен быть какой-то PHP ввод?

Скажем, у вас есть;

.class-for-A {
   width:200px;
}
.class-for-B {
   width:400px;
}
.class-for-C {
   width:600px;
}

<div id="image-container">    
<!--(this section to be created automatically, and apply styles subsequently based on file name end)-->
   <div>
      <img src="img-filename-123-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-456-B.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-C.jpg"/>
   </div>
   <div>
      <img src="img-filename-789-A.jpg"/>
   </div>

Это идея, что A, B, C, используются только чтобы указать стиль класса, а не последовательность. Таким образом, каждый img или div может быть стилизован автоматически, функционируя как своего рода система управления легким контентом (таким образом, когда-либо может быть только три css стиля класса (A, B, C), но они будут повторно использовался несколько раз на разных изображениях / делениях).

Это была просто мысль, которая у меня была, и мне было любопытно узнать, есть ли у кого-нибудь какие-либо мысли по этому поводу.

Answer 1

Вы можете попробовать document.querySelector или document.querySelectorAll, если хотите получить элементы по их src атрибутам.

document.querySelectorAll('img[src='your_filename']');

Answer 2

Спасибо, что ответили на мой вопрос. Это была большая помощь. Я изменил свой вопрос ранее сегодня, чтобы включить расширенную функциональность. Но я, возможно, уже нашел решение этой проблемы:

Вопрос:
Не могли бы вы использовать Javascript для создания последующей структуры <div><img/></div>, основанной на всех изображениях, содержащихся в одна папка внутри родительского контейнера <div>?

Найден ответ:
Как загрузить все изображения из одной из моих папок на мою веб-страницу, используя Jquery / Javascript

Answer 3

Попробуйте.

const images = document.querySelectorAll("img");

for (let image of images) {
  if (image.getAttribute("src").indexOf("A.jpg") !== -1) {
    image.setAttribute("class", "class-for-A");
  } else if (image.getAttribute("src").indexOf("B") !== -1) {
    image.setAttribute("class", "class-for-B");
  } else {
    image.setAttribute("class", "class-for-C");
  }
}

Это не так чисто, но работает.

Answer 4

Это супер просто, используя JavaScript:

const imgs = document.getElementsByTagName('img');
for(const img of imgs) {
    var name = img.src.substring(0, img.src.lastIndexOf('.'));
    if(name.endsWith('A')) {
        img.class = 'class-for-A';
        // or to apply class to parent element:
        img.parentElement.class = 'some-class'
    }
}

Answer 5

Вы можете выбрать элемент, используя селектор.

const image123 = document.querySelector("div img:nth-of-type(1)")
const image456 = document.querySelector("div img:nth-of-type(2)")
const image789 = document.querySelector("div img:nth-of-type(3)")

// OR

const image1123 = document.querySelector("div").children[0]
const image1456 = document.querySelector("div").children[1]
const image1789 = document.querySelector("div").children[2]

//image123.style = //modify here
// image123.className //all class applied

.class-for-A {
   width:200px;
}
.class-for-B {
   width:400px;
}
.class-for-C {
   width:600px;
}

<div>
   <img class="pic1" src="img-filename-123-A.jpg"/>
</div>
<div>
   <img src="img-filename-456-B.jpg"/>
</div>
<div>
   <img src="img-filename-789-C.jpg"/>
</div>