Question

如果div符合条件，我想在div中添加一些文本。现在所有的div都填充了添加的文本。请检查我的代码，以便更好地理解我的意思。实现目标的最佳解决方案是什么？谢谢。

$('.col-md-3').each(function () {
    if ($('.status:contains("Rent")').length > 0) {
        $('.price').append('/month');
    };
    return false;
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3"><div class="status">Rent</div><div class="price">€100</div> 
  </div>
  <div class="col-md-3"><div class="status">Rent</div><div class="price">€100</div>
  </div>
  <div class="col-md-3"><div class="status">For sale</div><div class="price">€1000</div>
  </div>
  <div class="col-md-3"><div class="status">For sale</div><div class="price">€1000</div>
</div>

Answer 1

尝试这样的事情，让我知道它是否对你有帮助。

$(document).ready(function () {

    $('.col-md-3 ').each(function () {

        if ($(this).children('.status').text() === "Rent") {

            $(this).children('.price').append("/month");
        }
    });
});

Answer 2

现在你要告诉jQuery检查文档中包含类.status的每个元素。您可以传递context，该jQuery( selector [, context ] )应仅用于查找与此精确<context>中的选择器匹配的元素。

<强>选择
类型：选择器
包含选择器表达式

的字符串

<强>上下文
类型：元素或jQuery
要用作上下文的DOM元素，文档或jQuery

在您的示例中，您必须使用this作为上下文，因为这是当前.col-md-3

＆＃13;

$(function() {
  $('.col-md-3').each(function() {
    if ($('.status:contains("Rent")', this).length > 0) {
      $('.price', this).append('/month');
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3"><div class="status">Rent</div><div class="price">€100</div> 
  </div>
  <div class="col-md-3"><div class="status">Rent</div><div class="price">€100</div>
  </div>
  <div class="col-md-3"><div class="status">For sale</div><div class="price">€1000</div>
  </div>
  <div class="col-md-3"><div class="status">For sale</div></div><div class="price">€1000</div>
</div>

＆＃13;

Answer 3

您的代码存在问题 if（$（'。status：contains（“Rent”）'）。length＆gt; 0） - ＆gt;这是检查html中的所有状态类然后一起附加。您可能想尝试检查问题 alert($('.status:contains("Rent")')); alert($('.status:contains("Rent")').length); $('.price').append('/month'); - ＆gt;这是更新html中存在的所有价格类，即使条件为真一次。

jsfiddle链接在这里https://jsfiddle.net/hjd69qsf/2/

解决方案如下

$('.col-md-3').each(function() {
  if ($(this).text().contains("Rent")) {
    $(this).children(".price").append('/month');
  };
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <div class="status">Rent</div>
    <div class="price">€100</div>
  </div>
  <div class="col-md-3">
    <div class="status">Rent</div>
    <div class="price">€100</div>
  </div>
  <div class="col-md-3">
    <div class="status">For sale</div>
    <div class="price">€1000</div>
  </div>
  <div class="col-md-3">
    <div class="status">For sale</div>
    <div class="price">€1000</div>
  </div>

检查每个div并在条件匹配时执行操作

3 个答案: