选择父元素的有效方法

时间:2014-06-13 22:27:58

标签: jquery jquery-selectors

我正在网站上进行DOM操作(我无法访问源代码),并且想知道是否有更好的方法可以使用jQuery在页面上选择元素。通常发生的是请求者要求更改页面上的某些内容(如文本或交换图像),我查看源代码,他们想要更改的项目没有ID - 只是类名称在DOM链上。例如,我会得到类似“你可以将汽车更改为适当的铁路酒店”,页面上的HTML如下所示:

<div>
  <div class="products">
      <div class="sidebarText">Telephones</div>
  </div>
  <div class="products">
      <div class="sidebarText">Automobiles</div>
  </div>
  <div class="products">
      <div class="sidebarText">Computers</div>
  </div>
</div>

我目前所做的是手动计算我需要更改的类的次数从页面顶部出现以构建选择器,在Firebug的控制台中测试它并继续我的业务。最终代码如下所示:

jQuery('.sidebarText').eq(1).html('Hotels');

虽然这有效,但在页面上手动计算DIV并不是选择DOM元素的有效方法,所以我想知道是否有更好的方法。在外行人看来,我希望有一种方法可以“在找到汽车这个词时选择父DIV,但只有当父DIV是sidebartext 时才会选择。”

在相关的说明中,如果Firebug有一个选项/插件复制jQuery选择器而不是xPath(/ html / body / div / div [2] / div)或CSS路径(html body),这也会更容易div div.products div.sidebarText) - 这将使我的两个选项都变得不必要(并且非常有用)。

由于

1 个答案:

答案 0 :(得分:0)

您正在寻找:contains(text)

$("div.sidebartext:contains('Automobiles')").text("Hotels");

两个警告:它区分大小写,上面的选择器将匹配&#34;超级汽车&#34;以及&#34;汽车&#34;。