Question

您好我有一个json对象，我正在创建无序的元素列表。它非常简单。

到目前为止，我有这个简单的脚本。

 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

现在我正在尝试将样式应用于我无法使用的li元素。也不知道如何在点击时切换元素。

Answer 1

问题是li已添加到div而不是ul。 obj元素是#div1元素，而不是ul.outerclass元素，因此应用于ul.outerclass的样式未应用于添加到li的{{1}}

＆＃13;

obj

＆＃13;

//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');

＆＃13;

但作为更合适的解决方案，使用类来设置元素的样式

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1"></div>

＆＃13;

//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>");
});

＆＃13;

.outerclass {
  list-style-type: square;
}

＆＃13;

Answer 2

要在点击时添加/切换css类，您可以在代码末尾添加：

//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

Answer 3

您可以使用jQuery / CSS以多种方式实现此目的。

JQUERY选项：

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

小提琴：http://jsfiddle.net/kiranvarthi/vm0tjn6a/

CSS选项：

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

Answer 4

这是你的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

在ul li元素jquery上应用样式

4 个答案: