Selecting a class from a div with multiple classes and add it as id?

Question

I am trying to select a class from a div which has multiple classes and print it as id.

Current Code:

<div class="name  usrname1  views-row">
  <div class="views-field views-field-field-user-name">
    <div class="field-content">John</div>
  </div>
</div>
<div class="name  usrname2  views-row">
  <div class="views-field views-field-field-user-name">
    <div class="field-content">Jane</div>
  </div>
</div>

In this code, I need to make the "usrname1" and make it id. That class dynamically changes and will be unique.

What I need:

<div class="name  usrname1  views-row" id="usrname1">
  <div class="views-field views-field-field-user-name">
    <div class="field-content">John</div>
  </div>
</div>
<div class="name  usrname2  views-row" id="usrname2>
  <div class="views-field views-field-field-user-name">
    <div class="field-content">Jane</div>
  </div>
</div>

https://jsfiddle.net/farhanmae/agx6t0wy/1/

[StackOverflow isn't here to do your work for you](https://stackoverflow.com/help/on-topic). Show us what you have tried so far. We'll gladly help you. — Zenoo, Nov 28 '17 at 10:08
To do this would involve splitting the `className` attribute by string and retrieving the second item in that array. It's incredibly brittle code which could be broken far too easily to be a workable solution. Could you explain why you believe you need this, as I'm certain there's a better way to do what you require. — Rory McCrossan, Nov 28 '17 at 10:08
follow this url https://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery — Rahul Sahu, Nov 28 '17 at 10:13
@RahulSahu I am able to get the class and pass it as id. But the id is passed to all the divs irrespective of the class its having. https://jsfiddle.net/farhanmae/wef0g6j2/1/ — Farhan Erooth, Nov 28 '17 at 11:24
@Zenoo this is what i have done so far https://jsfiddle.net/farhanmae/wef0g6j2/1/ — Farhan Erooth, Nov 28 '17 at 11:29
@RoryMcCrossan what i am trying to do is by adding the id to the divs i can use it as anchor links from different sections. — Farhan Erooth, Nov 28 '17 at 11:30

score 0 · Answer 1 · answered Nov 28 '17 at 10:41

That is the best solution I was able to find.

Loop through all the divs searching for a div with the class usrname. When found, add it to the id of the selected div

$(document).ready(function() {
  /* Loop through all divs */
  $("div").each(function() {
    var divElem = $(this) ;
    var cls = $(this).attr("class") ; //Get the div classes
    
    /* If class has the string "usrname" */
    if (cls.indexOf("usrname") !== -1) {
      var clsArr = cls.split(" ") ; //Split the cls string into an array holding all the classes.
      
      /* Loop through the array */
      clsArr.forEach(function(clsName) {
          /* If class has the string "usrname" */
          if (clsName.indexOf("usrname") !== -1) {
            divElem.attr("id", clsName) ; //Add the class to the id of the selected div
          }
      });
    }
  }) ;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="name usrname1 views-row">
  <div class="views-field views-field-field-user-name">
    <div class="field-content">John</div>
  </div>
</div>
<div class="name usrname2 views-row">
  <div class="views-field views-field-field-user-name">
    <div class="field-content">Jane</div>
  </div>
</div>

score -1 · Answer 2 · edited Nov 28 '17 at 10:40

-1

From jQuery Selectors use this: $("[class*='username']") to select all objects with class which contains word username. (I think it will select even if it has username[number] ) and after that you can user $.each to iterate through that array and change id with word do you want from class. You can do something like object.id = object.class.indexOf('username') or you can use split.

edited Nov 28 '17 at 10:40

falinsky

7,229
3
32
56

answered Nov 28 '17 at 10:18

Alex

1,013
1
13
27

Selecting a class from a div with multiple classes and add it as id?

2 Answers2