Wenden Sie CSS auf eine Anzahl von Divs an, die mit PHP definiert sind.

Question

Ich habe ein Array von Strings mit variabler Größe.

Für jedes Element im Array möchte ich separat die Größe des darin enthaltenen Textes ändern können.

Momentan funktioniert es nur im ersten Satz.

Ich würde so etwas wie

#trim <?= $i ?> {} 

der Lage sein, jeden Satz zu kontrollieren, aber diese doesent Arbeit.

Was wäre der optimale Weg, das zu tun?

Mein Code ist folgende:

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


    <style> 
    #trim { 
     text-overflow: ellipsis; 
     overflow: hidden; 
     white-space: nowrap; 
     position: relative; 
     padding-left:10px; 
     width: 50px; 
     } 
    #trim:after { 
     content: '+'; 
     right: 0; 
     position: absolute; 
    } 
    #trim.full { 
     width: auto; 
     height: auto; 
     white-space: normal; 
    } 
    #trim.full:after { 
     display: none; 
    } 
    </style> 


    <?php 

     $array=['first sentence','sencond sentence','third sentence']; 

     $i=0; 

     foreach ($array as $answer) 
     { 
     ?> 

     <p id="trim"><?= $answer ?></p> 

    <?php 
    $i++; 
    } 
    ?> 

    <script> 
    $('#trim').click(function() { 
    $(this).toggleClass('full'); 
    }); 
    </script> 

Answer 1

Id eindeutig sein muss.

Grund, warum Ihr Code nicht funktioniert.

Wenn Sie ein Element mit ID mit einem id Selektor wie $('#trim') auswählen, wird nur der erste ausgewählt.

Hinweis: Es ist immer besser, Klasse statt id zu verwenden.

Arbeiten Demo mit Klasse

$('.trim').click(function() { 
 
    $(this).toggleClass('full'); 
 
});

.full{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="trim">Para 1</p> 
 
<p class="trim">Para 2</p> 
 
<p class="trim">Para 3</p> 
 
<p class="trim">Para 4</p>

---

Sie Attributselektor verwenden können, wenn Sie id mit demselben Element verwenden. (Nur für das Wissen.)

$('[id="trim"]').click(function() { 
    $(this).toggleClass('full'); 
}); 

Working Demo

$('[id="trim"]').click(function() { 
 
    $(this).toggleClass('full'); 
 
});

.full{ 
 
    color:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p id="trim">Para 1</p> 
 
<p id="trim">Para 2</p> 
 
<p id="trim">Para 3</p> 
 
<p id="trim">Para 4</p>

Answer 2

The Id sind uniques Sie sie einmal verwenden können.

Hier benutze ich Ihre $ i für geben Sie einen anderen Namen jede ID.

<p id="trim$i"><?= $answer ?></p>