Jump to content
iwato

How to Format Mixed Variable and HTML Element jQuery Object Selectors

Recommended Posts

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();
		}
	});
}

 

Share this post


Link to post
Share on other sites

Is it like this?

$( id + 'textarea')

$( id + 'span.display_count'), and

$( id + 'span.words_remaining') 

Edited by iwato

Share this post


Link to post
Share on other sites

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 by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites

Got it, Dsonesuk!  Thanks!

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...