Jump to content

How to Format Mixed Variable and HTML Element jQuery Object Selectors


iwato

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

 

Link to comment
Share on other sites

Is it like this?

$( id + 'textarea')

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

$( id + 'span.words_remaining') 

Edited by iwato
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...