Collect class names under a <div> tag in java script array

Question

<script type="text/javascript">
 $(document).ready(function () {

 });

</script>


<div id="input">
    <div class="feature draggable">Drag 1</div>
    <div class="feature resizable">Resize</div>
    <div class="feature downloadable">Download</div>
    <div class="feature draggable">Drag 2</div>
    <div class="feature trackable">Track</div>
    <div class="feature colorable">Color</div>
</div>

I want to store all the class elements under the <div id="input"> in array. What is the correct way to do it?

JS Fiddle: http://jsfiddle.net/gMjxu/

See the answer here: stackoverflow.com/questions/1227286/… — Grzegorz
– Grzegorz, Commented Aug 30, 2012 at 4:33

Andreas · Accepted Answer · 2012-08-30 04:51:55Z

4

var classnames = $("#input div").map(function() { return this.className }).get();

If there will be more than one class on an element you will have to do some extra work.

edited Aug 30, 2012 at 4:51

answered Aug 30, 2012 at 4:38

Andreas

21.9k7 gold badges52 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

PiaklA Over a year ago

Thanks this helped me to understand , was not aware of .map

nnnnnn Over a year ago

+1. But note that you'd probably want to throw a .get() on the end to return an actual array rather than a jQuery object.

nathan gonzalez Over a year ago

for the more than one class on an element answer, please see my solution.

Andreas Over a year ago

@nnnnnn Good point. I've adjusted my solution as suggested :-)

tsukimi · Accepted Answer · 2012-08-30 04:39:56Z

0

  $(document).ready(function () {
        $.each($("#input div"), function() {
           alert($(this).prop('class'));
        });

 });

This fiddle

http://jsfiddle.net/dappledore/gMjxu/17/

edited Aug 30, 2012 at 4:39

answered Aug 30, 2012 at 4:31

tsukimi

1,6452 gold badges21 silver badges37 bronze badges

1 Comment

PiaklA Over a year ago

This will give me everything under the <div id> tag , I am trying to find a way if I could retrieve only class names under the <div id="input"> tag

chhameed · Accepted Answer · 2012-08-30 04:47:04Z

0

var classNames = []  

$('#input div').each(function(){
     classNames.push($(this).attr('class')) });

Hope this is what you are looking for.

edited Aug 30, 2012 at 4:47

chhameed

4,4564 gold badges30 silver badges47 bronze badges

answered Aug 30, 2012 at 4:44

Prem

6,0043 gold badges27 silver badges24 bronze badges

Comments

nathan gonzalez · Accepted Answer · 2012-08-30 04:52:19Z

0

(function($) {
    $.fn.classes = function(f) {
        var c = [];
        $.each(this, function(i, v) {
            var _ = v.className.split(/\s+/);
            for (var j in _)'' === _[j] || c.push(_[j]);
        });
        c = $.unique(c);
        if ("function" === typeof f) for (var j in c) f(c[j]);
        return c;
    };
})(jQuery);

$(document).ready(function() {
    alert($('#input div').classes());
});

$(document).ready(function () {
alert($('#input div').classes());
    });
</script>


<div id="input">
        <div class="feature draggable">Drag 1</div>
        <div class="feature resizable">Resize</div>
        <div class="feature downloadable">Download</div>
        <div class="feature draggable">Drag 2</div>
        <div class="feature trackable">Track</div>
        <div class="feature colorable">Color</div>
    </div>

should do the trick. http://jsfiddle.net/FRhKS/

you end up with an array of unique classes for all selected elements.

edited Aug 30, 2012 at 4:52

answered Aug 30, 2012 at 4:42

nathan gonzalez

12k4 gold badges43 silver badges57 bronze badges

3 Comments

Andreas Over a year ago

The fiddle has the same script as the one from the TO. Additionally you shouldn't use for(... in...) for arrays

nathan gonzalez Over a year ago

@Andreas, i see no problem with it, though i will admit to having posted the wrong link.

nnnnnn Over a year ago

for..in on Array objects is a bad plan unless you're 100% sure your code will never be used with somebody else's code (including third-party libraries). Even if you never add non-numeric properties to an array other people might and it could break your code. (Especially if you use a library that adds methods to Array.prototype.)

gaurang171 · Accepted Answer · 2012-08-30 10:40:14Z

Here i have complete demo bins and link as below:

Demo http://codebins.com/bin/4ldqp7w

HTML

<div id="input">
  <div class="feature draggable">
    Drag 1
  </div>
  <div class="feature resizable">
    Resize
  </div>
  <div class="feature downloadable">
    Download
  </div>
  <div class="feature draggable">
    Drag 2
  </div>
  <div class="feature trackable">
    Track
  </div>
  <div class="feature colorable">
    Color
  </div>
</div>
<input type="button" value="Show Classes" id="btn1" />

jQuery

$(function() {
    var c = [];
    $("#input div").each(function() {
        var cls = $(this).attr('class').split(' ');
        for (var j = 0; j < cls.length; j++) {
            if (cls[j] != '') {
                c.push(cls[j]);
            }
        }
    });

    $("#btn1").click(function() {
        if (c.length <= 0) {
            alert("No Class Exists...!");
        } else {
            for (var i = 0; i < c.length; i++) {
                alert(c[i]);
            }
        }
    });

});

Demo http://codebins.com/bin/4ldqp7w

Collectives™ on Stack Overflow

Collect class names under a <div> tag in java script array

5 Answers 5

4 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related