#jquery #css
#jquery #CSS
Вопрос:
Я не могу понять, почему моя функция применяет преобразование CSS к элементам, символов которых больше 17? Я включил как html, так и css, но он столкнется со многими из этих сеток, и я надеюсь немного увеличить текст элемента h2, если количество символов в нем меньше 17.
единственная проблема заключается в том, что он применяет css независимо от количества символов.
кто-нибудь может помочь? Спасибо
HTML
lt;div class="fancy_diamonds three_line text-center"gt; lt;div class="woocommerce columns-3"gt; lt;ul class="products columns-3"gt; lt;li class="product-category product first"gt; lt;div class="banner-box"gt; lt;div class="banner-box__image"gt; lt;a href="https://website/product-category/construction/"gt; lt;span class="woocommerce-loop-category__thumbnail" style="background-image :url(https://website/wp-content/uploads/2021/06/services1-2-600x326.jpg);"gt;lt;/spangt;lt;/agt; lt;/divgt; lt;div class="banner-box__info"gt; lt;a href="https://website/product-category/construction/"gt; lt;h2 class="woocommerce-loop-category__title"gt; Construction lt;/h2gt; lt;/agt; lt;/divgt; lt;/divgt; lt;/ligt; lt;li class="product-category product"gt; lt;div class="banner-box"gt; lt;div class="banner-box__image"gt; lt;a href="https://website/product-category/controlled-hygiene/window-cleaning/"gt; lt;span class="woocommerce-loop-category__thumbnail" style="background-image :url(https://website/wp-content/uploads/2021/06/store-smaller.jpg);"gt;lt;/spangt;lt;/agt; lt;/divgt; lt;div class="banner-box__info"gt; lt;a href="https://website/product-category/controlled-hygiene/window-cleaning/"gt; lt;h2 class="woocommerce-loop-category__title"gt; window cleaning lt;/h2gt; lt;/agt; lt;/divgt; lt;/divgt; lt;/ligt; lt;li class="product-category product last"gt; lt;div class="banner-box"gt; lt;div class="banner-box__image"gt; lt;a href="https://website/product-category/workwear-safety/"gt; lt;span class="woocommerce-loop-category__thumbnail" style="background-image :url(https://website/wp-content/uploads/2021/11/workwear.jpg);"gt;lt;/spangt;lt;/agt; lt;/divgt; lt;div class="banner-box__info"gt; lt;a href="https://website/product-category/workwear-safety/"gt; lt;h2 class="woocommerce-loop-category__title"gt; Workwear amp;amp; Safety lt;/h2gt; lt;/agt; lt;/divgt; lt;/divgt; lt;/ligt; lt;/ulgt; lt;/divgt; lt;/divgt; jQuery
jQuery(document).ready(function() { jQuery(".fancy_diamonds.three_line .woocommerce ul.products li:nth-child(3) .banner-box__info h2").each(function() { var charLength = jQuery(this).find("h2.woocommerce-loop-category__title").text().length; var newLength = charLength - 47; // This is another issue, it counts the html for some reason if (newLength lt; 17) { jQuery(this).css({ "transform": "translatey(-150%)" }); } else { jQuery(this).css({ "transform": "none" }); } }); }); Комментарии:
1.Ваш первый запрос
$("...h2")находит h2, но ваш 2-й запрос затем пытается найти другойh2внутри этого h2$("..h2").find("h2"), поэтому ничего не находит. Учитывая предоставленные html и jquery. Таким образом, длина всегда равна === 0, поэтому она всегда применяется. Если вы исправите селектор, то, вероятно, просто захотите.text().trim().lengthудалить пробелы (не HTML, как вы сказали, HTML нет).2. спасибо, что обрезка решила проблему с дополнительными персонажами. тем не менее, я внес изменения, которые вы предложили селекторам. Как я могу сказать, не вносите никаких изменений, а не трансформируйтесь: ничего для остальной части?
3. Просто удалите
elseдеталь?4. По какой-то причине, если у меня нет преобразования для другой части, он всегда будет применять стиль css для первого условия, независимо от того, выполняется ли условие. очень странно, я знаю.
5. я заставил это работать — я думаю, что проблема заключалась в другом преобразовании, которое у меня было в элементе. спасибо вам за вашу помощь.