javascript - How to expand/collapse (+/-) for a nested dynamic list using jquery -

-

i have tried toggle function think selecting proper list having problem.

var json ={"asia": [{"regionlist": [{"regionname": "eastern asia","countrylist": [{"countryname": "china","subcountrylist": [{"subcountryname": "southern china"},{"subcountryname": "eastern china"}]},{"countryname": "hong kong"}]},{"regionname": "southern asia","countrylist": [{"countryname": "india"},{"countryname": "pakistan"}]}]}]};  var html = '';  $.each(json, function(i1, object) {    html += '<li><input type="checkbox" /><b class=' + i1 + ' ><a name="' + i1 + '" >' + i1 + '</a></b>';      $.each(object, function(i2, continent) {  	html += '<ul>';      	$.each(continent.regionlist, function(i3, region) {  	    html += '<li><input type="checkbox" /><b>' + region.regionname + '</b>';  		  $.each(region.countrylist, function(i4, country) {  			html += '<ul><li class=' + country.countryname + '><input type="checkbox" />' + country.countryname;  			if (country.subcountrylist) {  			  $.each(country.subcountrylist, function(i5, subcountry) {  				html += '<ul><li><input type="checkbox" />' + subcountry.subcountryname + '</li></ul>';  			  });  				$("b." + country.countryname).toggle(function() {  					$(this).children('ul').slideup();  				},  				function() {  					$(this).children('ul').slidedown();  				});  				};  				html += '</li></ul>';  			  });  			  html += '</li>';  			});  			html += '</ul>';  		  });  		  html += '</li>';  		});    		$('#regioncontent ol').html(html);
li, ol{list-style:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="regioncontent">    <ol></ol>  </div>

i wanted add toggle function country name(china) has sub countries(southern china). on click of china should collapse sub countries list +/- sign , vice versa.

try 

var json = {    "asia": [{      "regionlist": [{        "regionname": "eastern asia",        "countrylist": [{          "countryname": "china",          "subcountrylist": [{            "subcountryname": "southern china"          }, {            "subcountryname": "eastern china"          }]        }, {          "countryname": "hong kong"        }]      }, {        "regionname": "southern asia",        "countrylist": [{          "countryname": "india"        }, {          "countryname": "pakistan"        }]      }]    }]  };  var html = '';  $.each(json, function(i1, object) {    html += '<li><input type="checkbox" /><b class=' + i1 + ' ><a name="' + i1 + '" >' + i1 + '</a></b>';    $.each(object, function(i2, continent) {      html += '<ul>';      $.each(continent.regionlist, function(i3, region) {        html += '<li><input type="checkbox" /><b>' + region.regionname + '</b>';        $.each(region.countrylist, function(i4, country) {          html += '<ul><li class=' + country.countryname.replace(/\s/g, "-") + '><input type="checkbox" />' + country.countryname;                    if (country.hasownproperty("subcountrylist") && country.subcountrylist.length > 0) {          html += '<span class=' + country.countryname.replace(/\s/g, "-") + '>-</span>';            };                      $(document)            .on("click", "input ~ span." + country.countryname.replace(/\s/g, "-") + ":first", function(e) {              $(this).siblings("ul").is(":visible") ? $(this).siblings("ul").slideup({                start: function() {                  e.target.textcontent = "+"                }              }) : $(this).siblings("ul").slidedown({                start: function() {                  e.target.textcontent = "-"                }              })            });          if (country.subcountrylist) {            $.each(country.subcountrylist, function(i5, subcountry) {              html += '<ul><li><input type="checkbox" />' + subcountry.subcountryname + '</li></ul>';              });          };          html += '</li></ul>';        });        html += '</li>';      });      html += '</ul>';    });    html += '</li>';  });    $('#regioncontent ol').html(html);
li,  ol {    list-style: none;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <div id="regioncontent">    <ol></ol>  </div>


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more