dom 相关问题

我有一个带有以下 DOM 树的代码：我有一个带有以下 DOM 树的代码： <div id="blogPagination"> <div class="pagination"> <ul> <li> <a href="/2" >1</a> </li> <li> <a href="/3" >2</a> </li> </ul> </div> </div> 我正在尝试访问我的标签的 href。我尝试过任何方法都无法达到目标。使用 jQuery 实现这一目标的最佳方法是什么？我尝试过： console.log($('#blogPagination div ul > li a ').attr("href")); console.log($('#blogPagination > a ').attr("href")); $('#blogPagination').children('a') console.log($('#blogPagination div ul li a').attr("href")); 没有运气.. 谢谢编辑：在 nbrooks 回答之后，这是我迄今为止尝试过的： function bindPagination() { console.log("bind"); $(function() { var links = $("#blogPagination ul a").map(function(e) { e.preventDefault(); return this.href; }).get(); console.log(links); }); 编辑2：考虑到Syfaro的回答，我也尝试过： $('#blogPagination').find('a').each(function(e) { e.preventDefault(); console.log($(this).attr('href')); }); 没有运气。编辑3：我想提供有关此功能的更多详细信息，毕竟它可能会产生重大影响：为了加载此分页，我使用 Ajax 并将手柄包装到文档就绪函数中： $(document).ready(function(){ // Get the customer service stats var Content = { init: function() { /* this.getHomePosts(); */ this.getBlogPosts(); }, getBlogPosts: function(offset) { if(offset == undefined){ offset = 0; } // GET the events with JSON $.ajax({ type: "POST", data: {}, url: site_url+"/main/blog/"+offset, dataType: "json", success: function(results) { posts = results["posts"].map(function (blogContent) { if( blogContent.picture != '' ) { return { Title: blogContent.title , Picture: Content.urlPostPic + blogContent.picture , Video: '' , Text: blogContent.text , Datetime: blogContent.datetime , } } else { return { Title: blogContent.title , Picture: '' , Video: blogContent.video , Text: blogContent.text , Datetime: blogContent.datetime , } } }); pagination = {pagination: results["pagination"]}; var template = Handlebars.compile( $('#templateBlog').html() ); $('#blogPosts').append( template(posts) ); var template = Handlebars.compile( $('#templatePagi').html() ); $('#blogPagination').append( template(pagination) ); // Here we call bindPagination <=== bindPagination(); } }); }, }; Content.init(); 您可以在 get BlogPosts 函数中看到我调用 BindPagination ，它应该是这个函数，以防止默认行为并根据偏移量（分页系统）调用内容 function bindPagination() { console.log("bind"); var links = $("#blogPagination ul a").map(function(e) { e.preventDefault(); return this.href; }).get(); console.log(links); $('#blogPagination').find('a').each(function(e) { console.log("clicked !"); e.preventDefault(); console.log($(this).attr('href')); // var attr = this.attr(); // var id = attr.replace("/",""); // $('#blogPosts').empty(); // $('#blogPagination').empty(); // Content.getBlogPosts(id); }); } }); 最后一个});代表文档结尾已准备好。 $('#blogPagination').find('a').attr('href'); 这应该找到指定区域中的所有 a 元素，并获取它们的 href，假设您已经设置了 jQuery 和所有这些好东西。如果你有多个 a 元素，你可以这样做： $('#blogPagination').find('a').each(function() { console.log($(this).attr('href')); }); 这将打印出该 href 中每个 a 的每个 div。如果需要防止链接更改页面，则需要向 a 元素添加点击处理程序。 $('#blogPagination').on('click', 'a', function(e) { e.preventDefault(); console.log($(this).attr('href')); }); 这将阻止用户被带到该链接，并在单击时获得该链接的 href。这是你想要的吗？您可能正在寻找的功能是map。这允许您获取给定的 jQuery 集合，并通过获取每个对象的特定属性并将其作为结果集合中的元素来转换它。收集数组中的所有 href： $(function() { var links = $("#blogPagination ul a").map(function() { return this.href; }).get(); console.log(links); }); jsFiddle 演示注意：子选择器 (el1 > el2) 仅当 el2 是 el1 的直接后代时才起作用。所以至少你的一个例子会失败，因为你的例子与你的 DOM 树不匹配。但是，假设您将其包装在 DOM 就绪处理程序中，console.log($('#blogPagination div ul > li a ').attr("href")); 可以找到（仅）第一个锚标记的 href。 $(function() { ... });方法类似，因为它只会查找直接后代（子代），而不是孙子等。如果您想在特定元素的 DOM 树中查找 all 后代，请使用 children 代替。普通的 Javascript 解决方案 find 检查您的控制台 - 因为我怀疑存在冲突或 JavaScript 错误导致 jQuery 无法工作。您的陈述是正确的，应该选择您需要的元素。 Vannila Javascript 解决方案 document.querySelectorAll("div #blogPagination a").forEach((item)=>console.log(item.href)); Array.prototype.map.call(document.querySelectorAll(".myselectorAreaofLinks"), function (e) { return e.getAttribute('href'); }); 方法是jQuery提供的方法，允许您选择具有特定后代元素的元素。要选择 .has() 内包含锚标记的链接，然后检索这些标记，我们可以使用此方法。下面是实现相同目的的示例。div 此示例首先借助 $('div:has(a)').find('a').each(function() { $(this).css('color', 'red'); }); 选择器选择所有包含锚标记的 div。之后，它在每个 :has() 元素上调用 find() 方法，以检索作为其后代的所有锚标记。最后，div方法用于迭代每个链接以添加或更改样式，或执行任何其他操作。

jquery html dom

回答 6 投票 0

JavaScript - 数组包含 HTMLDivElements 而不是元素（数字）中的 textContent

我正在开发一款普通的 JavaScript 宾果游戏。我创建宾果卡元素，然后创建一个网格。我创建了 5 个数组，每个数组有 5 个随机数。然后，对于每个数组中的每个数字，我创建一个 div

javascript arrays dom

回答 1 投票 0

从 HTML 链接时 JavaScript 文件不起作用

所以我觉得（并希望）这很简单。我是 javascript 新手，正在尝试让它工作。当我从 html 链接到外部 .js 文件时，它不起作用。然而，当进入

javascript jquery html dom

回答 9 投票 0

通过 property 或 setAttribute 设置属性

其中一个比另一个更优选吗？为什么？如果这些被调用数千次，那么性能怎么样？ A) element.setAttribute("disabled", true); B) element.disabled = true; T...