How to use a javascript function inside class attribute of an element

Question

I want to create a dynamic 'li' elements and want to assign some classes to the 'li' element by a javascript function based on some parameters in the load of the page I mean i want the function to run on all the 'li' elements i assign the function to.

something like : in design

<li class="nav-item someFunction("param1","param2")">
</li>

and the 'someFunction' is a javascript function that returns some classes as a string

to make the 'li' element as follows in the end : after rendering

<li class="nav-item cssClass1 cssClass2 cssClass3 cssClass4">
</li>

That's not how attributes work. Why can't you achieve what you need to through a standard function in JS using $('li').addClass()? — BenM
– BenM, Commented Sep 13, 2017 at 19:10
@BenM I did what i asked for but by a server side code and it worked well in static elements but I can't achieve this in dynamically made elements as the javascript elements cannot be passed to razor code so I made a javascript version of the server side function to work with the javascript variables but it did not work — Ahmed Hussein
– Ahmed Hussein, Commented Sep 13, 2017 at 19:16
@KoushikChatterjee can you please let me know how to do this by angularjs ? I figured it out by the answers here and discussions but I need to know the angularjs way — Ahmed Hussein
– Ahmed Hussein, Commented Sep 13, 2017 at 21:03

David Somekh · Accepted Answer · 2017-09-13 19:30:56Z

1

Not exactly how you asked it, but here is how you do it with jquery:

CodePen: https://codepen.io/anon/pen/XeJKVL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
.red{
  color:red;
  font-size:25px;
}
</style>
<script>
window.onload = function() {

        $( "#example" ).addClass("red");



    }

</script>
<li id="example">Example</li>

edited Sep 13, 2017 at 19:30

answered Sep 13, 2017 at 19:18

David Somekh

9734 gold badges14 silver badges39 bronze badges

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

4 Comments

Ahmed Hussein Over a year ago

I don't know the '.example' yet it's dynamic created so i want to pass it as parameter to return a value depending on it

David Somekh Over a year ago

Do you the know the ID? I modified the code to select based on that.

Ahmed Hussein Over a year ago

I didn't know the id but I created it and combined the parameters as id to send it the java script as its parameter and it finally worked thx

David Somekh Over a year ago

Glad it helped. If my answer is accurate to what you needed, can you approve it? Thx!

Farhad Bagherlo · Accepted Answer · 2017-09-13 19:43:22Z

1

$(document).ready(function(){
  $("#ifValueBtn").on("click",function(){
      var iFinput=$("#ifValue").val();
      if(iFinput==1)
        $(".nav-item").addClass("cssClass1");
      else if(iFinput==2)
        $(".nav-item").addClass("cssClass1 cssClass2");
      else
        $(".nav-item").addClass("cssClass1 cssClass2 cssClass3");

     console.log($(".nav-item").attr("class"));
   });
});

.cssClass1{color:red;}
.cssClass2{border:solid 1px #000;}
.cssClass3{font-size:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="ifValue" type="number" value="1"/>
<input id="ifValueBtn" type="button" value="Click"/>
<hr>
<ul>
<li class="nav-item">
test
</li>
</ul>

edited Sep 13, 2017 at 19:43

answered Sep 13, 2017 at 19:18

Farhad Bagherlo

6,6993 gold badges30 silver badges49 bronze badges

1 Comment

Ahmed Hussein Over a year ago

well I did not need it on click of anything but thanks at all I get the idea from you and the others answers I created an id for the 'il' element by combining the parameters from db as one word then use the id to the function to return the css string needed

Ahmed Hussein · Accepted Answer · 2017-09-13 21:14:57Z

Actually I figured out the answer from you people answered ideas I create the li items dynamically so I tried to create all the markup for it from database but it didn't work as the functions calls are being copied as string without parsing or compiling it of course so I have made the following function :

function someFuncionConvertedItsCodeFromServerSide(parameter1, parameter2,...) {
//somecode that debend on some server side functions, collections, session values, properties
// return css as string
}

and get some parameters from the db as follows in the ajax call example :

$.ajax({
                    type: 'POST',
                    url: 'url',
                    dataType: 'json',
                    success: function (result) {

                        for (var i = 0; i < result.array.length; i++) {
                            var css = someFuncion(result.array[i].id, other parameters .. );
                            var liItem = "<li class=\"nav-item " + css + " id=\"" + result.array[i].id + "\"> <a href =\"" + someHref + "\" class=\"nav-link\"> <span class=\"title\" > " + someText + " </span ></a>  </li>";
                            $("#ulId").append(liItem);
                        }  
                    }
                });

so as you can see I created an id for every created li to combine the parameters in one place that can be sent to a javascript function to return the css classes as a string as needed

It's a prototype code of course it needs some modification but that what is done and worked thank you all guys trying to help I get the idea from our discussion together tell me If i didn't mark the right answer

Collectives™ on Stack Overflow

How to use a javascript function inside class attribute of an element

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related