dom 相关问题

填充常规录音列表。对于此 TODO，您必须为 Billy 的一般录音数据组合新的和。与 TODO 4 不同，没有节或无序的 l... 填充常规录音列表。对于此 TODO，您必须为 Billy 的一般录音数据组装新的 <section> 和 <ul>。与 TODO 4 不同，用于录制的 section 中没有 unordered list 或 DOM，因此您也必须使用 jQuery 创建这些 elements。创建录音<section id="section-recordings">并将其添加到sidebar中评分最高的录音部分下方。如何才能通过 jQuery 实现这一目标？创建一个<ul id="list-recordings" class="list-recordings">，style，并将其添加到<section id="section-recordings">。为录音数组中的每个录音添加样式化的<li class="recording">。哪些lodash方法可以帮助您？为每个录音的 <div>、title、artist 和 release 添加单独的 year。根据他们在对象中的键给他们一个 class。将 CSS 样式规则添加到 css/site.css 文件以设置列表项的样式。这些样式规则是否适用于评分最高的列表和录音列表中的列表项目？如何通过 CSS selectors/rules 和 jQuery 实现这一目标？生成的HTML应该看起来像这样： <section id="section-recordings"> <ul id="list-recordings" class="list-recordings"> <li class="recording"> <div class="title">Title: Eastern Rebellion</div> <div class="artist">Artist: Cedar Walton</div> <div class="release">Release: Timeless</div> <div class="year">Year: 1976</div> </li>  </ul> </section> 但是，我的HTML文件看起来像这样： <div id="sidebar" class="sidebar"> <div id="image-container-billy" class="image-container"> <img id="image-billy" src="images/billy/billy-0.jpg" i="0" width="25%" class="image" /> </div> <section id="section-top-rated" class="recordings"> <header id="header-top-rated" class="header-recordings"> Top Rated </header> <ul id="list-top-rated" class="list-recordings"></ul> <li>Voice in the Night</li> <li>The Shape of Jazz to Come</li> <li>Like Sonny</li> <li>Go</li> <li>The Water Is Wide</li> <section id="section-recordings"> <ul id="list-recordings" class="list-recordings"></ul> <div class="title">Eastern Rebellion</div> <div class="artist">Cedar Walton</div> <div class="release">Timeless</div> <div class="year">1976</div> <div class="title">Soul Food</div> <div class="artist">Bobby Timmons</div> <div class="release">Prestige</div> <div class="year">1966</div> <div class="title">A Swingin' Affair</div> <div class="artist">Dexter Gordon</div> <div class="release">Blue Note</div> <div class="year">1962</div> <div class="title">Rejoice</div> <div class="artist">Pharoah Sanders</div> <div class="release">Theresa</div> <div class="year">1981</div> </section> </section> </div> 这是 code 文件中我的 JS 的开始位置： const onReady = data => { // YOUR CODE BELOW HERE // $('#section-bio').css('color', 'brown'); $('#section-quotes').css('color', 'blue'); /* eslint-enable */ // TO DO 4 //// const topRated = data.discography.topRated; let newSection = document.createElement('section'); topRated.forEach(recording => { $('#section-top-rated').append(`<li>${recording.title}</li>`); //let topR = $('#section-top-rated').append(`<li>${recording.title}</li>` ); }); const recordings = data.discography.recordings; $(`<section id="section-recordings"></section>`).appendTo( '#section-top-rated' ); //$(`<ul id="list-recordings" class="list-recordings"></ul>`).appendTo('#section-recordings') //$(`<li class="recording></li>`).appendTo('#list-recordings').appendTo('#list-recordings') $('#list-recordings').append(`<li class="recording></li>`); $(`#section-recordings`).append( `<ul id="list-recordings" class="list-recordings"></ul>` ); //$('#list-recordings').append(`<li class="recording></li>`) recordings.forEach(element => { $(`<li class="recording"></li>`); $('#section-recordings').append( `<div class="title">${element.title}</div>` ); $('#section-recordings').append( `<div class="artist">${element.artist}</div>` ); $('#section-recordings').append( `<div class="release">${element.release}</div>` ); $('#section-recordings').append( `<div class="year">${element.year}</div>` ); }); const uL = document.createElement( 'ul id="list-recordings" class="list-recordings"' ); uL.appendTo(`#section-recordings`); //let newSection = document.createElement('section'); //$(<section id="section-recordings"></section>) // const recordings = data.discography.recordings; //recordings.forEach(songs){ // } // YOUR CODE ABOVE HERE // }; 我尝试的所有内容都已用 // 标记注释掉。我一整天都被这个问题困扰了。我不知道为什么，但我的 <li></li> 列表没有显示，我觉得由于它们的缺失，这使得这个问题更难解决。我看不到它在哪里，所以我不知道如何移动它。顺便说一句，实际的 data.discography.recordings 引用了 array of objects。任何程度的帮助都会有所帮助，即使只是鼓励的话。为任何试图帮助我解决这个问题的人干杯。如果我至少能弄清楚为什么我找不到 <li class="recordings"></li> 那么这将是一个巨大的进步。我在你的code中发现了这些问题： Syntax错误。多次创建相同的<ul>。尝试使用简单的 JavaScript 的功能，这原本可以通过 jQuery 实现。您提供的HTML的输出与上述条件不符。因此，我创建了一个虚拟记录数组，并尝试使用 jQuery 和 loadash 来完成任务。为了便于理解，我还添加了注释。您可以根据自己的需要调整此解决方案。确保您有 installed 或添加了 CDN 和 loadash 中的 jQuery。 <div id="sidebar" class="sidebar"> <div id="image-container-billy" class="image-container"> <img id="image-billy" src="images/billy/billy-0.jpg" i="0" width="25%" class="image" alt="Img" /> </div> <section id="section-top-rated" class="recordings"> <header id="header-top-rated" class="header-recordings"> Top Rated </header> <ul id="list-top-rated" class="list-recordings"></ul> </section> </div> $(document).ready(() => { const dummyData = { discography: { topRated: [ { title: 'Voice in the Night' }, { title: 'The Shape of Jazz to Come' }, { title: 'Like Sonny' }, { title: 'Go' }, { title: 'The Water Is Wide' } ], recordings: [ { title: 'Eastern Rebellion', artist: 'Cedar Walton', release: 'Timeless', year: '1976' }, { title: 'Soul Food', artist: 'Bobby Timmons', release: 'Prestige', year: '1966' }, { title: "A Swingin' Affair", artist: 'Dexter Gordon', release: 'Blue Note', year: '1962' }, { title: 'Rejoice', artist: 'Pharoah Sanders', release: 'Theresa', year: '1981' } ] } }; const onReady = data => { const topRated = data.discography.topRated; // Add top rated recordings _.forEach(topRated, recording => { $('#list-top-rated').append(`<li>${recording.title}</li>`); }); // Create and append section for recordings const recordingsSection = $( '<section id="section-recordings"></section>' ); $('#section-top-rated').after(recordingsSection); // Create and style list for recordings const recordingsList = $( '<ul id="list-recordings" class="list-recordings"></ul>' ).css({ 'list-style': 'none', padding: '0', margin: '0' }); recordingsSection.append(recordingsList); // Add each recording to the list const recordings = data.discography.recordings; _.forEach(recordings, recording => { const listItem = $('<li class="recording"></li>'); recordingsList.append(listItem); // Add separate divs for title, artist, release, and year listItem.append(`<div class="title">${recording.title}</div>`); listItem.append(`<div class="artist">${recording.artist}</div>`); listItem.append(`<div class="release">${recording.release}</div>`); listItem.append(`<div class="year">${recording.year}</div>`); }); }; // Run onReady onReady(dummyData); });

javascript html jquery dom

回答 1 投票 0

如何通知 blazor(webassemble) 关于 js 所做的 DOM 更改？

我正在尝试减少渲染数千个跨度的非常重的组件的渲染计数。我无法应用虚拟化，因为跨度具有不同的大小。我正在尝试减少渲染数千个跨度的非常重的组件的渲染计数。我无法应用虚拟化，因为跨度具有不同的大小。 <div contenteditable="true"> @foreach (var item in els) { <span @key="@item.Key" class="@item.cssClass">@item.String</span> } </div> 我尝试用渲染跨度的组件替换跨度并且它可以工作，但初始渲染时间花费了太长的时间。我无法通过 js 完成所有操作并禁用重新渲染，因为根 div 可能包含一些其他 blazor 组件。我需要通过 JS 应用一些更改而不重新渲染，但有时会发生重新渲染并且渲染状态已损坏。我如何通知 blazor dom 的变化？或者也许我需要在渲染之前恢复 js 所做的所有更改？更改类型：修改span的textContent 在一定偏移处分割跨度将span添加到div中我需要使用类似 node.dispatchEvent(new Event('change')) 的东西吗？这里可能有什么问题吗？ Blazor 不提供内置机制来通知 .NET 运行时有关 JavaScript 所做的 DOM 更改，或将任意 JS 更改与 Blazor 应用程序状态同步。该框架不是为此设计的，通常不建议这样做。您可以做的是在完成 JavaScript 更改后使用 JSInterop 调用 C# .NET 方法。提供有关 .NET 运行时更改的信息，然后针对每种可能的更改类型执行以下操作（适用）：修改<span>内容：在els集合中找到正确的项目并更改其String属性值。在某个偏移处拆分 <span>：用具有正确 els 值的两个新项目替换 String 集合中的相应项目。将 <span> 添加到 <div>：将新项目添加到 els。在进行服务器端更改时，您可以覆盖组件的ShouldRender()方法并暂时禁用重新渲染，因为浏览器中的 DOM 已经是最新的。

javascript dom blazor blazor-webassembly

回答 1 投票 0

查找 DOM 上具有“id”属性的所有元素[重复]

简单。我想遍历 DOM 并找到所有具有 id 属性的元素。有人可以帮我写一个 js 和/或 jquery 脚本吗

javascript jquery dom tree-traversal

回答 2 投票 0

Uncaught 在 DOM 树中找不到 Livewire 组件

我使用 Dragablejs 为 OGSM 制作者制作目标列表，为此我从 Dragable 中获取信息并在我的 Livewire 组件中使用它来更新每个目标的 listorder 属性。但我...

dom laravel-livewire

回答 1 投票 0

当 DOM 元素的计算样式发生变化时触发事件？

是否有非轮询方法来监听元素计算样式的更改？这个幻想代码片段应该简洁地解释我的意思： var el = document.getElementById('doodad'); 埃尔.