CODEWITHSUNDEEP
jquerycsshtml-lists
user2118542
user2118542

Reputation:

Applying styles on ul li elements jquery

Hi I have a json object with which I am creating unordered list of elements.It's pretty straightforward.

So far I have this simple script.

 var data_to_send = $("#form1>div").find('input[name = "txt1"]').val();
 var data = ["Argentina", "Uk", "USA"];
 var obj = $("#div1");
 obj.append("<ul class='outerul'>");
 $.each(data, function (index, value) {
    obj.append("<li class='outerclass'>" + value + " : " + index + "</li>");
 });
 obj.append("</ul>");

 $('ul.outerul').css('list-style-type', 'square'); ??How can I apply style here

Now I am trying to apply style to li element which I am not able.Also any idea how to toggle the elements on click.

Upvotes: 1

Views: 4455

Answers (4)

Amit Kumar
Amit Kumar

Reputation: 5962

here is your JS

var data = ["Argentina", "Uk", "USA"];
 var obj = $("#div1");
 obj.append("<ul class='outerul'>");
 $.each(data, function (index, value) {
    obj.append("<li class='outerclass'>" + value + " : " + index + "</li>");
 });
 obj.append("</ul>");

 $('li.outerclass').css('list-style-type', 'square');

DEMO

Upvotes: 0

KiV
KiV

Reputation: 2273

You can acheive this in multiple ways using jQuery / CSS.

JQUERY Option:

$('ul li').css('list-style-type','square');

Fiddle: http://jsfiddle.net/kiranvarthi/vm0tjn6a/

CSS Option:

ul li { list-style-type: square; }

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388446

The problem is the lis are added to div not ul. obj is the #div1 element not the ul.outerclass element so the style applied to ul.outerclass is not getting applied to the lis added to obj

//var data_to_send = $("#form1>div").find('input[name = "txt1"]').val();
var data = ["Argentina", "Uk", "USA"];
var $obj = $("#div1");
var $ul = $("<ul class='outerul'>").appendTo($obj);
$.each(data, function(index, value) {
  $ul.append("<li class='outerclass'>" + value + " : " + index + "</li>");
});

$('ul.outerul').css('list-style-type', 'square');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>

But as a more appropriate solution use a class to style the elements

//var data_to_send = $("#form1>div").find('input[name = "txt1"]').val();
var data = ["Argentina", "Uk", "USA"];
var $obj = $("#div1");
var $ul = $("<ul class='outerul'>").appendTo($obj);
$.each(data, function(index, value) {
  $ul.append("<li class='outerclass'>" + value + " : " + index + "</li>");
});
.outerclass {
  list-style-type: square;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>

Upvotes: 3

Joel Harkes
Joel Harkes

Reputation: 11681

To add/toggle css class on click you can add this at the end of your code:

//var data_to_send = $("#form1>div").find('input[name = "txt1"]').val();
var data = ["Argentina", "Uk", "USA"];
var $obj = $("#div1");
var $ul = $("<ul class='outerul'>").appendTo($obj);
$.each(data, function(index, value) {
  $ul.append("<li class='outerclass'>" + value + " : " + index + "</li>");
});

$('ul.outerul').css('list-style-type', 'square');

$ul.click(function() {
  $(this).toggleClass( 'redText');
});
.redText {
 color: red; 
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>

click on list to change color

Upvotes: 0

Related Questions