javascript - 如何在 jQuery Mobile 中设置 "list item > link"的样式

Question

我有这样的东西:

$("#ofertas_cercanas").append("<ul data-role='listview' id='profile_list_close' style='max-height: 145px; overflow: auto;'>");
                    for (var i = 0; i < data.ofertas.length; i++) {
                        $("#profile_list_close")
                                .append("<li class='ui-nodisc-icon' data-icon='forward_arrow_merca'><a style='margin-top: 10px; margin-left: 15px; border-style: none; max-height: 50px; font-size: 0.8em; background-color: white !important;' href='#job_loaded_from_JSON_with_coordinates_to_user_profile_"
                                                + i + "'>"
                                                + "<div id='procesos_title'>" + data.ofertas[j].titulo + "</div>"
                                                + "</br>"
                                                + data.ofertas[i].empresa
                                                + "</br>"
                                                + data.ofertas[i].localidad
                                                + ", "
                                                + data.ofertas[i].provincia
                                                + "</a></li>");
                    }
...

我想知道 CSS 选择器如何指向 id 为 procesos_title 的 div。

尝试过

#user_profile .ui-content, #profile_list_close > li > a#procesos_title{
   color: red !important;
}

提前致谢

Answer 1

ID 存储在浏览器快速查找字典中，每个 ID 一个元素。出于这个原因(以及 HTML 规范)，您在添加动态元素时不能有重复的 ID。

而是为您的 procesos_title 使用类，如下所示:

$("#ofertas_cercanas").append("<ul data-role='listview' id='profile_list_close' style='max-height: 145px; overflow: auto;'>");
for (var i = 0; i < data.ofertas.length; i++) {
    $("#profile_list_close")
        .append("<li class='ui-nodisc-icon' data-icon='forward_arrow_merca'><a style='margin-top: 10px; margin-left: 15px; border-style: none; max-height: 50px; font-size: 0.8em; background-color: white !important;' href='#job_loaded_from_JSON_with_coordinates_to_user_profile_" + i + "'>" + 
         "<div class='procesos_title'>" + data.ofertas[j].titulo + "</div>" + "</br>" + data.ofertas[i].empresa + "</br>" + 
         data.ofertas[i].localidad + ", " + data.ofertas[i].provincia + "</a></li>");
}

并通过类在 CSS 中引用:

#user_profile .ui-content, #profile_list_close > li > a.procesos_title{
   color: red !important;
}