All actions within the same block with the class

Question

There is a block:

var $size = 155; if ($('.review-cont').height() > $size) { $('.review-cont').addClass('re-hide'); $('<span>', { text: 'Подробнее', class: 're-open' }).appendTo('.review-bottom'); $(".re-open").click(function() { $(this).siblings('.review-cont').toggleClass('re-hide').toggleClass('re-full'); var $button = $(this); $button.text($button.text() == "Подробнее" ? "Закрыть" : "Подробнее"); }); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="review"> <div class="review-top">имг</div> <div class="review-middle"> <p class="review-name">текст</p> <p class="review-location">еще текст</p> </div> <div class="review-bottom"> <div class="review-cont">КОНТЕНТ</div> </div> </div>

There are many such units. From the task everything is simple - if the specified block exceeds the height specified in the script, then add the class and the button.

But the problem is that if one of the many blocks fits into the height specified in the script, then the script does not work out not only for this block, but for all the others.

How to make the height was considered in each case independently? I assume the use of this , but did not understand how to fit it.

in which of the review-bottom blocks should the newly created span be inserted?
There are a lot of review blocks and the script should work independently in each of them.
the span should be inserted into that review-bottom where review-cont is subject to the condition> 155

Accepted Answer · 2016-12-17T12:15:06

The height method returns the height value for the first item in the collection.

Description: compose matched elements.

To check all you need to use each

In addition to insert a span, it is also necessary to take an element relative to the current one. in this case, the parent () method is appropriate.

Example:

 var $size = 155; $('.review-cont').each(function() { var $review = $(this); if ($review.height() > $size) { $review.addClass('re-hide'); $('<span>', { text: 'Подробнее', class: 're-open' }).appendTo($review.parent()) .click(function() { $(this).siblings('.review-cont').toggleClass('re-hide').toggleClass('re-full'); var $button = $(this); $button.text($button.text() == "Подробнее" ? "Закрыть" : "Подробнее"); }); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="review"> <div class="review-top">имг</div> <div class="review-middle"> <p class="review-name">текст</p> <p class="review-location">еще текст</p> </div> <div class="review-bottom"> <div class="review-cont">КОНТЕНТ</div> </div> </div>

based on your answer, I tried it like this: $ ('. review-cont', this). each (function () {if ($ (this) .height ()> $ size) {But the result was not at all the same .
not so, it means that the condition worked, but the span and classes were added in general in all review-bottom blocks, and not only in the one that fell under the condition

Answer 2 · 2016-12-17T12:41:03

I would do something like this -

 let listItemAll = Array.from( document.body.querySelectorAll( '.autoresize-content-container' ) ); const LIST_ITEM_MAX_HEIGHT = 36; function listItemSizeValid(element){ return element.scrollHeight > LIST_ITEM_MAX_HEIGHT; } function setElementSizeAllowedTask( element ){ element.dataset.state = "max-size" } listItemAll .filter( listItemSizeValid ) .forEach( setElementSizeAllowedTask );

 .list { list-style: none; display: inline-flex; justify-content: center; } .list-item { max-height: 80px; width: 100px; } .autoresize-content-container[data-state="default-size"] > button { display: none; } .autoresize-content-container[data-state="max-size"] { background: pink; }

 <main> <ul class="list"> <li class="list-item"> <div class="autoresize-content-container" data-state="default-size"> <span> some text some text </span> <button>развернуть</button> </div> </li> <li class="list-item"> <div class="autoresize-content-container" data-state="default-size"> <span> some text some text some text some text </span> <button>развернуть</button> </div> </li> <li class="list-item"> <div class="autoresize-content-container" data-state="default-size"> <span> some text some text </span> <button>развернуть</button> </div> </li> <li class="list-item"> <div class="autoresize-content-container" data-state="default-size"> <span> some text some text some text some text </span> <button>развернуть</button> </div> </li> <li class="list-item"> <div class="autoresize-content-container" data-state="default-size"> <span> some text some text </span> <button>развернуть</button> </div> </li> <li class="list-item"> <div class="autoresize-content-container" data-state="default-size"> <span> some text some text some text some text </span> <button>развернуть</button> </div> </li> </ul> </main>

Due to the fact that I do not want to write css for a content container that is not the essence of the question, I did not reduce the size, as in my previous example, so that you could see the buttons that only containers that exceed the height have.

Pay special attention to how the button is set. In js all you need to do is change the flag from default-size to max-size and then styles that are used to highlight the background are applied to the container.

And enough already to use the day before yesterday jQ , pure js has long surpassed it.

Thank you for your answer, so all the stylization in me goes through css, but as you correctly noted, you can only find out the height through js.
I did not give my css in the question, because it did not matter.
I work with jquery, because at least I can do something on it, on pure js, it's a failure.
I would like to know, can you present it in the form of pure js?
@Aaron who is to blame for the fact that you started learning the library, and not the language?
It turns out that you are not learning to program, but learn to be a librarian.
Yes, I did not blame anyone, just clarified why jq, and not js initially.
Regarding your option - IE swears at the first line js throwing out "The object does not support the property or the" from "method".
And as far as I understand with the data attributes, everything below IE 11 is in the span?
In general, I am in favor of throwing IE out of circulation and even more so all that up to version 11, but not.
Preprocessors are already standard and even beginners are obliged to use them in order not to waste time in vain.
Now you spend a lot of time on jq, and then it will seem to you that you already know it and are ready to switch to other libraries, and with their help you can only write in pure js and using them together with jq is considered a bad form.
And then there are two reasons - the first is not worth learning from the old lessons and the second if you don’t want to do it, then who will be the cheapest, dismal sites to do?

All actions within the same block with the class

2 answers 2

More articles: