使用jQuery更新所有子级中的data属性

时间:2018-12-14 23:21:00

标签: jquery attributes hover

我有一个任务,应该将data-hover部分中的所有.links属性更改为正确的属性,这些属性位于<span>元素中:

<section class="links">
    <nav>
        <a href="#" data-hover="JavaScript"><span>Backbone</span></a>
        <a href="#" data-hover="Angular"><span>JavaScript</span></a>
        <a href="#" data-hover="Backbone"><span>Angular</span></a>
        <a href="#" data-hover="Ember"><span>Ember</span></a>
    </nav>
</section>

我已经在尝试将所有data-hover值拉入一个数组并将它们(使用splice方法)交换为新值,但是之后并没有实现为HTML代码。同样,当我尝试仅对第一个元素进行更改时,它不会更新HTML,尽管在控制台中可以看到对变量的更新。

2 个答案:

答案 0 :(得分:1)

使用attr(attributeName, function)可以轻松完成任务。

$('.links a').attr('data-hover', function(){
  return $(this).text().trim();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="links">
    <nav>
        <a href="#" data-hover="JavaScript"><span>Backbone</span></a>
        <a href="#" data-hover="Angular"><span>JavaScript</span></a>
        <a href="#" data-hover="Backbone"><span>Angular</span></a>
        <a href="#" data-hover="Ember"><span>Ember</span></a>
    </nav>
  </section>

答案 1 :(得分:0)

更改for file in target_directory.rglob('*.csv'): print(str(file.stem).split('_')) # FILE LEVEL VARIABLES state_name = str(file.stem).split('_')[0] data_category = str(file.stem).split('_')[1] workforce_segment = str(file.stem).split('_')[2] job_type = str(file.stem).split('_')[3] year = str(file.stem).split('_')[4] # PREPARED STATEMENT sql = """INSERT INTO opendata_uscensus_usa_lodes_wac (state_name, data_category, workforce_segment, job_type, year, w_geocode, C000, CA01, CA02, CA03, CE01, CE02) VALUES (%s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s, %s)""" with open(file,'r') as file_in: # ITERATE THROUGH FOR CSV VARIABLES reader = csv.DictReader(file_in) for row in reader: cur.execute(sql, (state,data_category,workforce_segment,job_type,year, row['w_geocode'], row['C000'], row['CA01'], row['CA02'], row['CA03'], row['CE01'], row['CE02']) ) conn.commit() 属性的另一种方法是在文档初始化时(即文档准备就绪时)使用 JQuery方法: data(key, value)。检查下一个示例:

data-hover
$(document).ready(function()
{
    $(".links a").each(function()
    {
       // DEBUG: Log the original data-hover attribute.
       console.log("Original: " + $(this).data("hover"));

       // Fix data-hover attribute of each link.
       $(this).data("hover", $(this).find("span").text());
    });

    // DEBUG: After some time, log de new attributes.
    setTimeout(function()
    {
        $(".links a").each(function()
        {
            console.log("New: " + $(this).data("hover"));
        });
    },
    2000);
});