CODEWITHSUNDEEP
javascriptjquery
Jerome
Jerome

Reputation: 1192

Why my function isn't applied to every elements despite I use a class

I did a function to add a button and limit the characters numbers of each article that are on my website.

I just find a problem and it's that one part of the function is applied to each element (the size restriction) but the button doesn't appear on each article (take a look at the picture bellow) enter image description here

That's my Javascript code where I loop over each element and add the button if the <span>length is bigger than my limit:

resize = function() {
  //allow us to limit the text length
    $('.liArticle').each(function(i, obj) {
    mySpan = $('.mySpan');
    if(mySpan.text().length>500){
      //put the read more button
      $("#readMore").removeClass("hidden");
    }
    mySpan.text(mySpan.text().substring(0,500) + '\n' + " ...");
  });
}

And there is the HTML code of the articles where I use class (the important things are the <li>and the <button id="readMore>):

<template name="article">
  <li class="liArticle">
    <div>
        <img id="pic" src= {{photo}} />
    </div>
    <div>
        <label class="titreArticle">{{titre}}</label>
        {{#if isOwner}}
           {{#unless wantModif}}
        <button class="delete" style="color:black">&times;</button>
        <button class="modify" style="color:black">modifier</button>
          {{/unless}}
        {{/if}}
        <p id="dateHeure"><strong>Ecrit par: {{username}} le {{date}} à {{heure}} {{lieux}} </strong></p>
        <br>
    </div>
    <div id="textContenu">
        <span class="mySpan">{{text}}</span>
    </div>
    <button type="button" id="readMore" class="hidden">lire la suite </button>
    <button type="button" id="readAll" class="hidden">retourner sur le site </button>
  </li>
</template>

Someone can help me to figure out what I'm doing wrong with my Javascript ?

[EDIT] I have changed my code with your advices and now the problem is deeper in the code where I do "when we click readMore display all the text in the span" but now it doesn't display this text it only display the same that was in the first step (the limited character text) take a look

'click .readMore'(event) {
  event.preventDefault();
  const id = this._id
  const art = Articles.findOne({_id: id});
  titre =  art["titre"];
  text = art["text"];
  const photo = art["photo"];
    $(".readMore").addClass("hidden");
    mySpan.text(text);
    $("#readAll").removeClass("hidden");
window.scrollTo(0,0);
},

[EDIT2] Okay guys now it works so thank you to everybody who helped me ! The thing I had to change was in the first EDIT I had mySpan.text(text); now I putted $('.mySpan').text(text);because we changed that in the HTML

Upvotes: 1

Views: 67

Answers (3)

abhinav
abhinav

Reputation: 687

The culprit is this:-

$("#readMore").removeClass("hidden");

Id has to be unique otherwise it will take only the first occurrence of this id and apply the changes to it. Add some unique identifier with the id.

Also, you are creating a substring of more than 500 chars use:-

mySpan.text(mySpan.text().substring(0,495) + '\n' + " ...");

Edit:- You can do this if you have the id of the articel

<button type="button" id="readMore_{{id}}" class="readMore hidden">lire la suite</button>

Script:- 

 resize = function() {
    //allow us to limit the text length
    $('.liArticle').each(function(i, obj) {
    mySpan = $('.mySpan');
    if(mySpan.text().length>500){
      //put the read more button
      $(this).find('.readMore').removeClass("hidden");
    }
    mySpan.text(mySpan.text().substring(0,495) + '\n' + " ...");
 });
}

Upvotes: 1

BenG
BenG

Reputation: 15154

change your readMore to a class and look for mySpan and the readMore within the li:-

<button type="button" class="readmore hidden">lire la suite </button>
<button type="button" class="readall hidden">retourner sur le site </button>

.

resize = function() {
  //allow us to limit the text length
    $('.liArticle').each(function(i, obj) {
       mySpan = $('.mySpan', this);
       if(mySpan.text().length>500){
         //put the read more button
         $('.readmore', this).removeClass("hidden");
       }
       mySpan.text(mySpan.text().substring(0,500) + '\n' + " ...");
  });
}

using $('.mySpan', this) and $('.readmore', this) will target the elements within the li in the each.

Upvotes: 1

Nikolay Osaulenko
Nikolay Osaulenko

Reputation: 1482

You are selecting all spans in every loop. Just change selector to mySpan = $(this).find('.mySpan'); And as @BenG noticed you should use class on button instead of id and show it like this $(this).find('.readMore').removeClass('hidden');

Upvotes: 1

Related Questions