正文

如果 li 包含文本，则将更改应用于同一 li 中的特定 div，而不是全部

 2023-02-23  36

关键词：

【中文标题】如果 li 包含文本，则将更改应用于同一 li 中的特定 div，而不是全部【英文标题】：If li contains text, apply change to specific div in the same li, not all 【发布时间】：2015-06-03 15:14:51 【问题描述】：

我有一个项目列表，每个项目都有一个按钮和一个价格。我能够找到显示“选择选项”的按钮，然后将更改应用到另一个 div，但是，它会更改所有<li>s 的 div，而不仅仅是按钮文本出现的那个。如何仅包含对相关 <li> 的更改？

if ($('ul li:contains("Choose Options")')) 
  $(".p-price").prepend("STARTING AT: ");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li>
    <em class="p-price">$1.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
  <li>
    <em class="p-price">$4.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Choose Options</a>
    </div>
  </li>
  <li>
    <em class="p-price">$5.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
</ul>

<script>
</script>

上面的脚本确实找到了“选择选项”文本。但随后它将“开始于：”添加到所有.p-price 实例。我如何让它只更改同一<li> 中的.p-price？这样<li>s 有“添加到购物车”按钮，不要在价格前插入文字？

我已经阅读了有关 .each()、return false 和循环的信息，但不确定我是否在寻找正确的树，因为我尝试了各种失败的代码迭代，但说到这个具体如果包含，更改另一个 div，我找不到任何接近的东西。

【问题讨论】：

【参考方案1】：

不需要if：只需将文本添加到可能存在的任何匹配元素：

$('li:contains("Choose Options") .p-price').
  prepend("STARTING AT: ");

  $('li:contains("Choose Options") .p-price').
    prepend("STARTING AT: ");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul>
  <li>
    <em class="p-price">$1.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
  <li>
    <em class="p-price">$4.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Choose Options</a>
    </div>
  </li>
  <li>
    <em class="p-price">$5.95</em>
    <div class="ProductActionAdd">
      <a href="" class="btn">Add To Cart</a>
    </div>
  </li>
</ul>

【讨论】：

检查包含字符串的 li 项时，我的混合应用程序不会更改页面

】检查包含字符串的li项时，我的混合应用程序不会更改页面【英文标题】：Myhybridappwontchangepageswhencheckingliitemwhichcontainsastring【发布时间】：2017-01-0213:32:07【问题描述】：对于我正在进行的项目，我想让我的混合应用程序（phoneg... 查看详情

如何使用 li:hover 更改整个 li 颜色？

...但我终生无法弄清楚如何更改整个li元素的background-color。如果您查看thisfiddle，您会看到我想要完成的工作。我到处寻找，但我还没有找到“突出显示”文本左侧区域的解决方案。此外查看详情

仅 li 子弹的颜色 [重复]

...到项目符号问题。我只想更改li子弹的颜色，而不是整个文本。我无法更改html代码以将文本放入span、p或其他内容中。引导层：http://bootply.com/102688（我试查看详情

js自定义创建标签，a标签包含于li标签内。

js创建标签中，新建li标签，再新建a标签，希望a标签在li内，怎么做？先新建<li></li>，在新建<a></a>,把a标签appendChild()进li就可以了varoLi=document.createElement('li');//创建li标签varoA=document.createElement('a');//... 查看详情

将鼠标悬停在 li 上时如何更改所有字体颜色

...悬停在一个列表元素（它是一个矩形）上时，里面的所有文本都变成白色，背景变成橙色。我的问题是当您将鼠标悬停在li元素上时，“discProd”类中的文本不会变成白色。只有第一个文本变成白色。HTML<o 查看详情

用jquery实现简单的dom操作

...：$oLi=$("<li></li>");这样我们就创建了一个li标签如果想在元素节点中添加文本的话也挺简单：$oLi=$("<li>文本</li>");这样就可以在元素节点中添加文本了；当然如果你要写一个动态的文本也可以：$oLi=$("<li>"+inde... 查看详情

li 不会在 IE 中正确浮动

...）。基本上我在一个固定宽度的div中有一个列表。该列表包含没有高度或宽度的li单元格，其中包含一个链接和一个样式化的span标签。li单元格应该向右浮动，span标签相对于<a>向右浮动问题，IE无法处理。而且查看详情

多线程并发同一个表问题（li）

...dateof使用户能够锁定指定表或表的数据行这个功能在实际应用中具有很重要的意义，特别对于多用户多线程处理中如要先获取数据通过判断在去更新数据（这中间不允许数据发生变化）的时候这个SQL功能是唯一最佳的选择。　　... 查看详情

jquery选择器

...b"以外的所有li3.2内容过滤选择器$("div:contains(‘Runob‘)")//包含Runob文本的元素$("td:empty")//不包含子元素或者文本的空元素$("div:has(selector)")//含有选择器所匹配的元素$("td:parent")//含有子元素或者文本的元素3.3可见性过滤选择查看详情

如果在 li 中使用多个类，如何删除 li 类

】如果在li中使用多个类，如何删除li类【英文标题】：Howtoremoveclassofliifthereisusingmultipleclassesinli【发布时间】：2018-02-2011:37:14【问题描述】：HTML代码echo"<ulid=\'sub\'>";if($Set==null)echo\'<liclass="BlankSeat"></li>\';如果在数据... 查看详情

Python BeautifulSoup 获取文本第一个标签

...utifulSoup将标签的文本获取到li标签的第一级。问题是标签包含其他li标签，而这些标签又包含其他标签。示例html：<li><ahref="http://lol.lol"> 查看详情

Selenium webdriver在页面更改后获取元素

...问题，基本上我是在点击另一个链接后尝试获取li元素的文本。该链接将导致li命令发生更改。每当我尝试获取文本时，它都会在订单更改之前返回文本。订单从点击链接更改后如何获取li文本？该链接不会重新加载页面本查看详情

在 ul li 中垂直居中文本

】在ulli中垂直居中文本【英文标题】：Verticallycentertextinulali【发布时间】：2014-11-1522:10:37【问题描述】：所以，显然我似乎无法弄清楚为什么li内的文本一直粘在它的顶部......我尝试过使用高度、行高、垂直对齐、显示（表格、... 查看详情

单击内部复选框时，使用jQuery将类添加到包含li

...isclicked【发布时间】：2016-01-2822:59:22【问题描述】：目标如果单击了“行”<li>，则突出显示（通过添加background-color到）该行内的（嵌套）复选框。背景在此功能中，我正在开发文件管理系统的界面查看详情

<li> 元素中的文本居中对齐

】<li>元素中的文本居中对齐【英文标题】：text-aligncenterin<li>element【发布时间】：2018-01-2816:39:30【问题描述】：bodymargin:0;.headerwidth:80%;height:20%;margin-left:10%;position:fixed;top:0;box-sizing:border-box;border-style:solid;border 查看详情

xpathstring()提取多个子节点中的文本

<div><ulclass="show"><li>275万购昌平邻铁三居总价20万买一居</li><li>00万内购五环三居140万安家东三环</li><li>北京首现零首付楼盘53万购东5环50平</li><li>京楼盘直降5000中信府公园楼王现房</li>... 查看详情

多个按钮绑定同一个点击事件

<divclass="div1"><ulclass="link"><li>点击</li><li>点击</li><li>点击</li></ul><ul><li>点击</li><li>点击</li><li>点击</li 查看详情

文本定时变动(代码片段)

效果：基础HTML：<divid="list"><ulid="contain"class="abk"name="con_list"><li>一个现代JavaScript应用程序的静态模块打包器</li><li>Vue.js简单的脚手架命令行工具</li><li>一个开发移动端和桌面端的框架</li 查看详情