iwato Posted April 18, 2017 Share Posted April 18, 2017 Please consider the following function and explain how to format the selectors for the highlighted jQuery objects. Please explain why you recommend what you do so that I need not ask the same question again further down the line. The names of the Javascript variables in question are, of course id and max. An iteration over the property-value pairs of a nested JSON object yields the following two pairs of property-value pairs for a single object: id : #letter_abstract and length : 150.. All other objects that are traversed by the iteration share the same property names -- only the values are different. The values of these two property-value pairs will be read into the function as id and max, respectively -- in effect, id = id and max = length Now, the jQuery objects in question are: $ (id textarea) -- where id is a Javascript variable corresponding to the value of the id attribute of an HTML div element, and textarea is the generic name of an HTML element. $(id span.display_count) -- where id is a Javascript variable corresponding to the value of the id attribute of the same HTML div element, and span.display_count is a generic HTML span element whose class attribute has the value of "display_count". $(id span.words_remaining) -- Same as above. Only the value of the class attribute is different. QUESTION: "How does one format the selectors properly?" function setWordContraint(id, max) { $(id textarea).on('keydown', function(e) { var words = $.trim(this.value).length ? this.value.match(/\S+/g).length : 0; if (words <= max) { $(id span.display_count).text(words); $(id span.words_remaining).text(max-words); }else{ if (e.which !== 8) e.preventDefault(); } }); } Link to comment Share on other sites More sharing options...
iwato Posted April 18, 2017 Author Share Posted April 18, 2017 (edited) Is it like this? $( id + 'textarea') $( id + 'span.display_count'), and $( id + 'span.words_remaining') Edited April 18, 2017 by iwato Link to comment Share on other sites More sharing options...
dsonesuk Posted April 18, 2017 Share Posted April 18, 2017 (edited) If they are child element of parent div, you need to add space before child elements. $( id + 'textarea') will look for an element with id '#letter_abstracttextarea' $( id + ' textarea') = '#letter_abstract textarea' will look for child textarea element whose parent element has this specific id. Edited April 18, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
iwato Posted April 18, 2017 Author Share Posted April 18, 2017 Got it, Dsonesuk! Thanks! Link to comment Share on other sites More sharing options...
dsonesuk Posted April 18, 2017 Share Posted April 18, 2017 (edited) You could reduce class name by using sibling selector '#letter_abstract textarea + span' would target next sibling only <div id='letter_abstract' class="textarea_maxword"> <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea> Word Count: <span class='display_count'>0</span>Words Remaining: '#letter_abstract textarea + span + span' would target next sibling following the span directly following the element with id '#letter_abstract' <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea> Word Count: <span class='display_count'>0</span> Words Remaining: <span data-maxcount="150" class='words_remaining'>0</span> You wouldn't use it in this case but this sibling selector using '~' '#letter_abstract textarea ~ span Would target all sibling span elements directly following element with id '#letter_abstract' <textarea name='letter_abstract' placeholder="Enter this week's abstract here!"></textarea> Word Count: <span class='display_count'>0</span> Words Remaining: <span data-maxcount="150" class='words_remaining'>0</span> Edited April 18, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now