jquery — Как получить сгенерированный PHP HTML & lt; ul & gt; список, чтобы применить правило только к первому & lt; li & gt; пункт в этом списке?
Код для создания списка самых читаемых статей на моем сайте Joomla и отображения их заставок выглядит следующим образом:
<ul class="mostread<?php echo $moduleclass_sfx; ?>"><?php foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif; ?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php endforeach; ?></ul>
Имея мало или совсем не имея опыта работы с PHP, что мне нужно сделать с этим кодом, чтобы он отображал только изображение первого элемента вместо всех них?
Решение
@ Хек-мат был близок, но ОП пытался остановить образ на других сообщениях от отображения, не ссылка а заголовок.
<?php
// track if we've seen an image yet or not
$seen_first = false;
foreach ( $list as $item ) :
$images = json_decode( $item->images );
// OP only wants posts with image_intros
if ( $images->image_intro ) :
// OP only wants to see the first item's image
if ( ! $seen_first ) :
?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars( $item->title ); ?>" />
<?php
// don't show another image
$seen_first = true;
// end "if first not seen yet"endif;
// show the article (for all)
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name"><?php echo $item->title; ?></span>
</a>
</li>
<?php
// end "if image_intro"endif;
endforeach;
?>
Другие решения
Попробуй вот так ..
Установите переменную $first = true; после отображения первого элемента установите его false,
<ul class="mostread<?php echo $moduleclass_sfx; ?>">
<?php
$first = true;//initially set true
foreach ($list as $item) : ?>
<?php $images = json_decode($item->images); ?>
if($first==true){ ?> //checks $first is true if true prints
<?php if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php endif;
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li>
<?php
}
$first = false;//after printing first item set it false
endforeach; ?></ul>
Чтобы отобразить только первый элемент изображения, вы должны сделать это, как показано ниже.
<?php
$first = true;//initially set true
foreach ($list as $item) :
$images = json_decode($item->images);
if($first==true):
if( $images->image_intro ) : ?>
<img src="<?php echo $images->image_intro; ?>" alt="<?php echo htmlspecialchars($item->title); ?>" />
<?php
endif;
endif;
$first = false;
?>
<li itemscope itemtype="https://schema.org/Article">
<a href="<?php echo $item->link; ?>" itemprop="url">
<span itemprop="name">
<?php echo $item->title; ?>
</span>
</a>
</li><?php endforeach; ?>
Вместо того, чтобы модифицировать PHP, возможно, проще добавить немного CSS в пользовательский файл CSS, например так:
ul.mostread img {display: none;}
ul.mostread img:first-of-type {display: block;}
так что отображается только первое изображение.
Увидеть https://joomla.stackexchange.com/a/3878/120 инструкции о том, как создать собственный файл CSS в Joomla.
Пользовательский CSS-файл также имеет то преимущество, что он не будет перекрыт никакими будущими обновлениями Joomla или шаблонов.