arrays - Javascript to select all <h3>'s, get their length, add class if greater than 30 characters -


i have site created using joomla, , i've created blog layout using masonry. right columns using same width it's masonry 3 columns of width. want create function can grab "h3.g-item-title" , store them array; want able use length property determine length of each h3; want test if length of characters greater 30, if so, add additional class h3's parent div in css can create second class give articles longer titles greater width in masonry.

in theory understand how execute each step, putting them getting lost (new learning javascript). in english, here steps believe need, can please critique thinking if needed , me code out?

  1. create array variable stores h3's desired class.
  2. then need test length of each of these h3's , store value each correct title.
  3. then need test if h3 has greater length 30 characters, , if so, add additional class it, if it's not greater 30, nothing added.

here's markup of each article show div structure , class names:

<div class="g-grid" style="position: absolute; left: 15.008px; top: 15.008px;">     <div class="g-block">         <div class="g-content">             <div class="g-array-item">                 <div class="g-array-item-title">                     <h3 class="g-item-title">                         <a href="/writingcommons-1/index.php?option=com_content&amp;view=article&amp;id=1312:data-visualizations&amp;catid=479:stem-technical-writing&amp;itemid=548">data visualizations</a>                     </h3>                 </div>                 <div class="g-array-item-details">                     <span class="g-array-item-date"><i class="fa fa-clock-o"></i>thursday, september 15, 2016</span>                     <span class="g-array-item-author"><i class="fa fa-user"></i>katherine mcgee</span>                     <span class="g-array-item-category">                         <a href="/writingcommons-1/index.php?option=com_content&amp;view=category&amp;id=452&amp;itemid=101"><i class="fa fa-folder-open"></i>writing commons book</a>                         <a href="/writingcommons-1/index.php?option=com_content&amp;view=category&amp;id=206&amp;itemid=966"><i class="fa fa-folder-open"></i>genres</a>                         <a href="/writingcommons-1/index.php?option=com_content&amp;view=category&amp;id=479&amp;itemid=548"><i class="fa fa-folder-open"></i>stem/technical writing</a>                     </span>                     <span class="g-array-item-hits"><i class="fa fa-eye"></i>1024</span>                 </div>             </div>         </div>     </div> </div>

the width applied top div class "g-grid", it's element want add class if h3 within has length greater 30. possible , can walk me through coding this?

thanks :)

do this:

array.prototype.slice.call(document.queryselectorall('h3.g-item-title'))     .filter( node => node.textcontent.trim().length > 30)     .foreach( node => node.classlist.add("g-grid"));

array.prototype.slice.call dirty trick turn nodelist array. in way, access filter , foreach methods let filter out nodes lengthier 30 characters , add class them.

note array.prototype.slice.call trick won't work on ie. instead have wrap every node in nodelist in array , filter , modify them:

var mynodelist = document.queryselectorall('li'); var myarrayfromnodelist = []; // empty @ first (var = 0; < mynodelist.length; i++) {   myarrayfromnodelist.push(mynodelist[i]); // ahhh, push }

this last bit taken here: https://toddmotto.com/ditch-the-array-foreach-call-nodelist-hack/#problem3-separation-of-concerns


-

Comments

Post a Comment

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

i writing web app multiple listeners(evcentsource sse clients js) connected server . want store sse emitter per connected listener : can done in memory or other means assigning id each client able achieve far now question ; how send response/event specific client connected web app ? while doing sseemmiters stored either getting completed or timed out. how prevent ? how keep sseemmiter available open infinite time (till client closes) , send events selectively .
Read more

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

i'm trying implement crud operation using datatableseditor using datatables.but i'm getting error messages: 1)uncaught exception: datatables editor - remote hosting of code not allowed. please see http://editor.datatables.net details on how purchase editor license 2)typeerror: a.editor undefined 3) $.fn.datatable.editor not constructor" what reason? here configuration: <%@ page language="java" contenttype="text/html; charset=iso-8859-1" pageencoding="iso-8859-1"%> <!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <title>insert title here</title> <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.datatables.min.css"> <link re...
Read more

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -

i trying convert json java object use of gson in maven, following youtube video guidance - https://www.youtube.com/watch?v=vqgghm9pwe0 , theres error occurs when in main class error - package com.squareup.okhttp3 doesn't exist. code below: java package com.codebeasty.json; import com.squareup.okhttp3.okhttpclient; public class main { private static okhttpclient client = new okhttpclient(); public static void main (string [] args) { } } i put in dependency in pom.xml: <dependencies> <dependency> <groupid>com.squareup.okhttp3</groupid> <artifactid>okhttp</artifactid> <version>3.4.2</version> </dependency> <dependency> <groupid>com.google.code.gson</groupid> <artifactid>gson</artifactid> <version>2.8.0</version> </dependency> </dependencies> i dont understand why doesn't recognize com.squareup. there may need download? have downl...
Read more