Styjun

Non-electric Laser

C - Learning Linked Lists, Pointer Manipulation - Store some ints, print and free memory

Does it require less energy to reach the Sun from Pluto's orbit than from Earth's orbit?

"cd" into /sys/kernel/debug/tracing causes permission change

Young adult short story book with one story where a woman finds a walrus suit and becomes a walrus

Notation clarity question for a conglomerate of accidentals

What benefits are there to blocking most search engines?

The answer is the same (tricky puzzle!)

Why is the time of useful consciousness only seconds at high altitudes?

Search for something difficult to count/estimate

The oxidation state of iodine in iodoxybenzoic acid

What does a textbook look like while you are writing it?

Bothered by watching coworkers slacking off

As an interviewer, how to conduct interviews with candidates you already know will be rejected?

Using 4K Skyrim Textures when running 1920 x 1080 display resolution?

What is the difference between increasing volume and increasing gain?

What would the EU’s position be with respect to a United Ireland?

Did the Humans find out about Gaius Baltar's role in the sabotage of the fleet?

Why do we not always use the closed testing principle for multiple comparisons?

Parent asking for money after I moved out

Driving test in New Zealand?

How is this situation not a checkmate?

Is there any printer at Taiwan Taoyuan International Airport (TPE) that airline passengers can use?

What's the correct way to determine turn order in this situation?

Creating a jQuery object inside an for loop of an array with class names

Create ArrayList from arrayWhat is the best way to add options to a select from as a JS object with jQuery?How do I check if an array includes an object in JavaScript?Creating a div element in jQueryHow can I select an element with multiple classes in jQuery?Sort array of objects by string property valueLoop through an array in JavaScriptHow to check if an object is an array?Find object by id in an array of JavaScript objectsLoop through an array of strings in Bash?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty
margin-bottom:0;

0

1

I'm trying to dynamically add classes when calling function and storing them in an array, then create jQuery objects for each item in array (will use it with .clone() further on). However the jQuery objects returns as undefined. What am I missing?

JS:

jQuery.fn.cloneInfo = function (myClasses) 
 $this = jQuery(this);
 myClassArray = [];


 var splitClasses = myClasses.split(' ');
 jQuery.each(splitClasses, function()
 myClassArray.push(this); 
 );



 var i;
 for (i = 0; i < myClassArray.length; i++) 
 thisClass = myClassArray[i];
 alert(thisClass); //THIS RETURNS .my-class-1 & .my-class-2
 $thisClone = jQuery(thisClass);
 alert($thisClone.attr('class')); //THIS RETURNS UNDEFIENED
 
 

 jQuery('.wrap').on('click', '#button', function(e) 
 e.preventDefault();
 $this = jQuery(this);
 jQuery(this).cloneInfo('.my-class-1 .my-class-2');

 );

jquery arrays for-loop

share|improve this question

edited Mar 28 at 21:42

Carl Papworth

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok, found the fix: change $thisClone = jQuery(thisClass); to $thisClone = jQuery("" + thisClass);
  
  – Carl Papworth
  Mar 28 at 21:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  "" + String is pointless and shouldn't make any difference. Provide a minimal reproducible example that reproduces problem
  
  – charlietfl
  Mar 28 at 21:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  jQuery(this).cloneInfo('.my-class-1 my-class-2');: The first selector has a dot and the second one doesn't.
  
  – Jennifer Goncalves
  Mar 28 at 21:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @charlietfl Yet it did ... weird. And without that fix I get error message uncaught TypeError: Cannot read property 'ownerDocument' of undefined
  
  – Carl Papworth
  Mar 28 at 21:42
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @JenniferGoncalves Yes, that was just a typo for the example (using a slightly different naming in my actual project)
  
  – Carl Papworth
  Mar 28 at 21:44
  

  
  
  
  

 | 
show 4 more comments

0

1

I'm trying to dynamically add classes when calling function and storing them in an array, then create jQuery objects for each item in array (will use it with .clone() further on). However the jQuery objects returns as undefined. What am I missing?

JS:

jQuery.fn.cloneInfo = function (myClasses) 
 $this = jQuery(this);
 myClassArray = [];


 var splitClasses = myClasses.split(' ');
 jQuery.each(splitClasses, function()
 myClassArray.push(this); 
 );



 var i;
 for (i = 0; i < myClassArray.length; i++) 
 thisClass = myClassArray[i];
 alert(thisClass); //THIS RETURNS .my-class-1 & .my-class-2
 $thisClone = jQuery(thisClass);
 alert($thisClone.attr('class')); //THIS RETURNS UNDEFIENED
 
 

 jQuery('.wrap').on('click', '#button', function(e) 
 e.preventDefault();
 $this = jQuery(this);
 jQuery(this).cloneInfo('.my-class-1 .my-class-2');

 );

jquery arrays for-loop

share|improve this question

edited Mar 28 at 21:42

Carl Papworth

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Ok, found the fix: change $thisClone = jQuery(thisClass); to $thisClone = jQuery("" + thisClass);
  
  – Carl Papworth
  Mar 28 at 21:16
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  "" + String is pointless and shouldn't make any difference. Provide a minimal reproducible example that reproduces problem
  
  – charlietfl
  Mar 28 at 21:28
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  jQuery(this).cloneInfo('.my-class-1 my-class-2');: The first selector has a dot and the second one doesn't.
  
  – Jennifer Goncalves
  Mar 28 at 21:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @charlietfl Yet it did ... weird. And without that fix I get error message uncaught TypeError: Cannot read property 'ownerDocument' of undefined
  
  – Carl Papworth
  Mar 28 at 21:42
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @JenniferGoncalves Yes, that was just a typo for the example (using a slightly different naming in my actual project)
  
  – Carl Papworth
  Mar 28 at 21:44
  

  
  
  
  

 | 
show 4 more comments

I'm trying to dynamically add classes when calling function and storing them in an array, then create jQuery objects for each item in array (will use it with .clone() further on). However the jQuery objects returns as undefined. What am I missing?

JS:

jQuery.fn.cloneInfo = function (myClasses) 
 $this = jQuery(this);
 myClassArray = [];


 var splitClasses = myClasses.split(' ');
 jQuery.each(splitClasses, function()
 myClassArray.push(this); 
 );



 var i;
 for (i = 0; i < myClassArray.length; i++) 
 thisClass = myClassArray[i];
 alert(thisClass); //THIS RETURNS .my-class-1 & .my-class-2
 $thisClone = jQuery(thisClass);
 alert($thisClone.attr('class')); //THIS RETURNS UNDEFIENED
 
 

 jQuery('.wrap').on('click', '#button', function(e) 
 e.preventDefault();
 $this = jQuery(this);
 jQuery(this).cloneInfo('.my-class-1 .my-class-2');

 );

jquery arrays for-loop

share|improve this question

edited Mar 28 at 21:42

Carl Papworth

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

jQuery.fn.cloneInfo = function (myClasses) 
 $this = jQuery(this);
 myClassArray = [];


 var splitClasses = myClasses.split(' ');
 jQuery.each(splitClasses, function()
 myClassArray.push(this); 
 );



 var i;
 for (i = 0; i < myClassArray.length; i++) 
 thisClass = myClassArray[i];
 alert(thisClass); //THIS RETURNS .my-class-1 & .my-class-2
 $thisClone = jQuery(thisClass);
 alert($thisClone.attr('class')); //THIS RETURNS UNDEFIENED
 
 

 jQuery('.wrap').on('click', '#button', function(e) 
 e.preventDefault();
 $this = jQuery(this);
 jQuery(this).cloneInfo('.my-class-1 .my-class-2');

 );

share|improve this question

edited Mar 28 at 21:42

Carl Papworth

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

share|improve this question

edited Mar 28 at 21:42

Carl Papworth

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

asked Mar 28 at 21:12

Carl PapworthCarl Papworth

55322 gold badges99 silver badges2626 bronze badges

1 Answer
1

active

oldest

votes

0

Essentially it appears these are the objectives:

1. 
   

   Click a button:

   
   
   

   $('button').on('click', function() ...);
   

   
   


2. 
   

   Add multiple classes to a given collection (in OP this part is vague)

   
   
   

   $(collection).addClass(cList)
   

   
   


3. 
   

   Return an array (OP is not clear as to what this array consists of)

   
   
   

   $(collection).toArray()
   

   
   


4. 
   

   So if all assumptions are correct:

   
   
   

   $('button').on('click', function() 
    var cArr = $(collection).addClass(cList).toArray();
    console.log(cArr)'
   );
   

   
   

The following demo is a reusable plugin of the code above. The plugin is wrapped in a click event handler instead of including an event handler in the plugin itself.

Plugin......: .classArray()
Signature: $(collection).classArray(cList);
Parameters

    collection      [String]: Any valid selector

    cList [DOMTokenString]: A space delimited list of classNames
Note: The CSS is optional and not required.

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

share|improve this answer

edited Mar 29 at 15:55

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges

add a comment
 | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55406918%2fcreating-a-jquery-object-inside-an-for-loop-of-an-array-with-class-names%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Essentially it appears these are the objectives:

1. 
   

   Click a button:

   
   
   

   $('button').on('click', function() ...);
   

   
   


2. 
   

   Add multiple classes to a given collection (in OP this part is vague)

   
   
   

   $(collection).addClass(cList)
   

   
   


3. 
   

   Return an array (OP is not clear as to what this array consists of)

   
   
   

   $(collection).toArray()
   

   
   


4. 
   

   So if all assumptions are correct:

   
   
   

   $('button').on('click', function() 
    var cArr = $(collection).addClass(cList).toArray();
    console.log(cArr)'
   );
   

   
   

The following demo is a reusable plugin of the code above. The plugin is wrapped in a click event handler instead of including an event handler in the plugin itself.

Plugin......: .classArray()
Signature: $(collection).classArray(cList);
Parameters

    collection      [String]: Any valid selector

    cList [DOMTokenString]: A space delimited list of classNames
Note: The CSS is optional and not required.

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

share|improve this answer

edited Mar 29 at 15:55

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges

add a comment
 | 

0

Essentially it appears these are the objectives:

1. 
   

   Click a button:

   
   
   

   $('button').on('click', function() ...);
   

   
   


2. 
   

   Add multiple classes to a given collection (in OP this part is vague)

   
   
   

   $(collection).addClass(cList)
   

   
   


3. 
   

   Return an array (OP is not clear as to what this array consists of)

   
   
   

   $(collection).toArray()
   

   
   


4. 
   

   So if all assumptions are correct:

   
   
   

   $('button').on('click', function() 
    var cArr = $(collection).addClass(cList).toArray();
    console.log(cArr)'
   );
   

   
   

The following demo is a reusable plugin of the code above. The plugin is wrapped in a click event handler instead of including an event handler in the plugin itself.

Plugin......: .classArray()
Signature: $(collection).classArray(cList);
Parameters

    collection      [String]: Any valid selector

    cList [DOMTokenString]: A space delimited list of classNames
Note: The CSS is optional and not required.

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

share|improve this answer

edited Mar 29 at 15:55

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges

add a comment
 | 

Essentially it appears these are the objectives:

1. 
   

   Click a button:

   
   
   

   $('button').on('click', function() ...);
   

   
   


2. 
   

   Add multiple classes to a given collection (in OP this part is vague)

   
   
   

   $(collection).addClass(cList)
   

   
   


3. 
   

   Return an array (OP is not clear as to what this array consists of)

   
   
   

   $(collection).toArray()
   

   
   


4. 
   

   So if all assumptions are correct:

   
   
   

   $('button').on('click', function() 
    var cArr = $(collection).addClass(cList).toArray();
    console.log(cArr)'
   );
   

   
   

The following demo is a reusable plugin of the code above. The plugin is wrapped in a click event handler instead of including an event handler in the plugin itself.

Plugin......: .classArray()
Signature: $(collection).classArray(cList);
Parameters

    collection      [String]: Any valid selector

    cList [DOMTokenString]: A space delimited list of classNames
Note: The CSS is optional and not required.

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

share|improve this answer

edited Mar 29 at 15:55

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$.fn.classArray = function(cList) 
 this.addClass(cList);
 return this.toArray();


$('button').on('click', function() 
 var cArr = $('li, p, a').classArray('c1 c2');
 //var cArr = $('li, p, a').addClass('c1 c2').toArray();
 console.log(cArr);
);

*:after 
 content: ' 'attr(class)


.as-console-wrapper 
 width: 60%;
 margin-left: 40%


.as-console-row.as-console-row::after 
 content: '';
 padding: 0;
 margin: 0;
 border: 0;
 width: 0;

<header>
 <button>classArray</button>
</header>
<main>
 <header>
 <nav>
 <ol>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 <li><a href='#/'>LINK</a></li>
 </ol>
 </nav>
 </header>
 <article>
 <h1>MAIN TITLE</h1>
 <p>CONTENT</p>
 </article>
</main>
<footer></footer>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

share|improve this answer

edited Mar 29 at 15:55

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges

answered Mar 29 at 15:50

zer00nezer00ne

27.8k33 gold badges2828 silver badges4949 bronze badges