Jquery else if statement doesn't seem to be working

Question

I have an else if statement which is to show or hide a read more button depending on the number of characters within the div.

The actual if statement seems to work - which removes the read more button but the else if doesn't seem to be working.

My code is below

$('.hotel-copy').each(function () {
    if ($(".sidebar-box").length < 194) {  // if count is less than 193
        $(".read-more").hide();
    }
    else if ($(".sidebar-box").length > 194) {  // if count is greater than 193
        $(".read-more").show();
    }
});

HTML

<div class="hotel-copy">
   <div class="sidebar-box">
      @if (!string.IsNullOrWhiteSpace(hotel.Description))
         {
            <p>@hotel.Description</p>
            <p class="read-more"><a href="javascript:void(0);" class="button">Read more</a></p>
          }
    </div>
 </div>

CSS

/* READ MORE */
.accommodation-container .sidebar-box {
    height: 120px;
    position: relative;
    overflow: hidden;
}

    .accommodation-container .sidebar-box .read-more {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        /* text-align: center; */
        margin: 0;
        padding: 20px 0 0px 0;
        background-image: linear-gradient(to top, #f7f7f7, #f7f7f7);
    }

Any help would be much appreciated.

Thanks

`"$(".sidebar-box").length` doesn't give you the length of the characters, rather it returns you the length of the jQuery object containing elements with `sidebar-box` class. — Teemu, Jun 13 '18 at 10:33
try `$(".sidebar-box").text().length` or `$(".sidebar-box").val().length` — Carsten Løvbo Andersen, Jun 13 '18 at 10:33
Note that your conditions don't match the comments. You have no case for when `length == 194` — Rory McCrossan, Jun 13 '18 at 10:36
The marked answer is using jQuery `.text().length` to determine the length. When using just `selector`.length you are querying for the number of matched elements instead. — Nope, Jun 13 '18 at 10:41

score 3 · Answer 1 · answered Jun 13 '18 at 10:38

If you want to check the number of characters of the text within the element, use text().length. The length property of a jQuery object (as you were originally using) is for retrieving the number of elements contained in the collection matching the selector you used.

Also note that you can shorten the logic by providing a boolean value to toggle() instead of separate show()/hide() calls:

$('.hotel-copy').each(function () {
  $('.read-mode').toggle($(".sidebar-box").text().length >= 194);
});

Finally, I amended the operator to >= as you had no case covering when the length of the text was exactly 194 characters.

Bhumi Shah · Accepted Answer · 2018-06-13T11:09:30.937

0

Use this code, will work:

DEMO: https://codepen.io/creativedev/pen/jKwVXL

$('.hotel-copy').each(function () {
  console.log($.trim($(this).children(".sidebar-box").children("p").text()).length)
    if ($.trim($(this).children(".sidebar-box").children("p").text()).length < 194) {  // if count is less than 193
        $(this).children(".sidebar-box").children(".read-more").hide();
    }
    else if ($.trim($(this).children(".sidebar-box").children("p").text()).length >= 194) {  // if count is greater than 193
        $(this).children(".sidebar-box").children(".read-more").show();
    }
});

edited Jun 13 '18 at 11:09

answered Jun 13 '18 at 10:37

Bhumi Shah

9,323
7
63
104

what about when length == 194? – ADyson Jun 13 '18 at 10:39
@ADyson More a question for OP as that might be intentional and OP doesn;t want to change anything on 194. - Though I do believe it's an oversight most likely on OP's behalf. – Nope Jun 13 '18 at 10:44
2

Assuming spaces are not considered valid characters, specially with show more and less is very presumptuous. Spaces usually are valid characters in sentences which should trigger show more/less functionality. If the text has 200 spaces in the beginning, followed by 20 characters you would not see the 20 characters now. – Nope Jun 13 '18 at 10:47
@bhumi I tried this, but it doesn't seem to work. When I copy and paste it into console and change .hotel-copy to .sidebar-box it seems to hide the read more button but when pasted into my scripts file and then debugged - there is no effect :/ - i've included my HTML and CSS also – Danzel91 Jun 13 '18 at 11:05
@Danzel91: updated code as per html. it should work now. – Bhumi Shah Jun 13 '18 at 11:09
@BhumiShah Within the .sidebar-box I changed it to read .sidebar-box p which targetted the p tags within the div - I am assuming your code is better structured so I will go with this - thanks for your help and thanks for all the other comments guys – Danzel91 Jun 13 '18 at 11:12

Jquery else if statement doesn't seem to be working

2 Answers2