如何将CSS样式应用于动态生成的列表（在mCustomScrollbar容器中）？(How to apply CSS styling to dynamically generated list (wi

如何将CSS样式应用于动态生成的列表（在mCustomScrollbar容器中）？(How to apply CSS styling to dynamically generated list (within mCustomScrollbar container)?)

我正在使用getJSON()从MongoDB数据库动态生成列表。

生成的HTML是正确的，相关的CSS样式也是正确的。

<li>应该有图像作为背景，但它们没有被应用。

在Firebug中，我将鼠标悬停在每个<li>的图像背景URL上，并预览图像，这样我就可以告诉路径是正确的，它们只是没有显示。

我遇到的解决方案涉及使用listview('refresh')但这似乎是一个jQuery Mobile解决方案，我只是使用标准的jQuery。

我看到的另一个解决方案是在函数运行后对元素使用addClass() ，但该元素已经在HTML中应用了正确的类，该样式只是没有显示。

在运行函数之后是否存在重新应用CSS的“标准”方法，或者确保将CSS应用于动态生成的列表的另一种方法？

HTML

jQuery （外部js文件）

$(document).ready(function() { loadListItems(); }); function loadListItems() { var href= "/url"; $.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){ $.each(results.my_key, function(k,v) { $("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\">text</li></ul></li>"); }); }) }

生成的HTML

I'm dynamically generating a list from a MongoDB database using getJSON().

The HTML being generated is correct and the related CSS styles are also correct.

The <li>'s should have images as backgrounds, but they aren't being applied.

In Firebug, I hover over the image background URL for each <li> and the image is previewed so I can tell the path is correct, they are just not being displayed.

The solutions I have come across involve using listview('refresh') but that seems to be a jQuery Mobile solution and I am just using standard jQuery.

Another solution I have seen is to use addClass() to an element after the function has run, but the element already has the correct class applied in the HTML, the style is just not being displayed.

Is there a 'standard' way of re-applying CSS after a function has run, or another approach to ensure that CSS is applied to a dynamically generated list?

HTML

jQuery (external js file)

$(document).ready(function() { loadListItems(); }); function loadListItems() { var href= "/url"; $.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){ $.each(results.my_key, function(k,v) { $("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\">text</li></ul></li>"); }); }) }

Generated HTML

最满意答案

解

解决方案涉及修改mCustomScrollbar函数的位置，该函数应用于<ul>的div容器。

jQuery （外部js文件）

// wrap mCustomScrollbar in a custom function function listScrollbar() { $("#my_ul_container").mCustomScrollbar({ horizontalScroll:true, set_width: false, set_height: false, scrollInertia:550, advanced:{ updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:false, autoScrollOnFocus:true } }) } // dynamically generate <li>'s function loadListItems() { var href= "/url"; $.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){ $.each(results.my_key, function(k,v) { $("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\">text</li></ul></li>"); }); // call the mCustomScrollbar function listScrollbar() }) } // call loadListItems $(document).ready(function() { loadListItems(); });

Solution

The solution involved modifying the placement of the mCustomScrollbar function which was applied to the div container of the <ul>.

jQuery (external js file)

// wrap mCustomScrollbar in a custom function function listScrollbar() { $("#my_ul_container").mCustomScrollbar({ horizontalScroll:true, set_width: false, set_height: false, scrollInertia:550, advanced:{ updateOnBrowserResize:true, updateOnContentResize:true, autoExpandHorizontalScroll:false, autoScrollOnFocus:true } }) } // dynamically generate <li>'s function loadListItems() { var href= "/url"; $.getJSON("/path_to_python_script", {cid: href, format: 'json'}, function(results){ $.each(results.my_key, function(k,v) { $("ul.my_ul_class").append("<li data-thing1=\"" + v + "\" class=\"prefix_" + v + "\"><ul class=\"nested\"><li class=\"hidden_li\">text</li></ul></li>"); }); // call the mCustomScrollbar function listScrollbar() }) } // call loadListItems $(document).ready(function() { loadListItems(); });

更多推荐