2023年6月29日 20:12:24go评论53阅读模式

英文:

Retrive text inside a nested span?

问题

我有以下的动态HTML，我想根据最后一个元素内的文本来改变

的颜色，在这种情况下是"OK"。

我尝试了一些不同的方法，但都没有给我正确的文本，所以

的颜色没有改变。实际上，console.log(text)命令没有输出。下面是我用于此目的的jQuery代码。

$(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").each(function() {
	var text = $(this).text()
	console.log(text)
   if (text == 'OK') {
	  $('div.fundoDiv').css("background-color", "green");
    } else {
      $('div.fundoDiv').css("background-color","red");
    }
});

任何帮助将不胜感激。

Marcio

英文:

I have the following dynamic HTML, and I would like to change the color of the <div> based on text inside the last span element, in that case, an "OK".

&lt;div class=&quot;data&quot;&gt;
	&lt;div class=&quot;fundoDiv&quot;&gt;
		&lt;section&gt;
			&lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
		&lt;/section&gt;
	&lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OK&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;

I have tried some different approaches, but none of them has given me the correct text, so the <div> color was not changed. In fact, the console.log(text) command has no output. Below is the jQuery I'm using for that.

$(&quot;.fundoDiv span.EmbeddedMiniatureVisualization:last-child&quot;).each(function() {
	var text = $(this).text()
	console.log(text)
   if (text = &#39;OK&#39;) {
	  $(&#39;div.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;green&quot;);
    } else {
      $(&#39;div.fundoDiv&#39;).css(&quot;background-color&quot;,&quot;red&quot;);
    }
});

Any help will be highly appreciated.

Marcio

答案1

得分: 1

以下是您要翻译的内容：

You forgot to trim your text to remove white spaces and compare instead of an assignment:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    $(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").each(function() {
        var text = $(this).text().trim();
        console.log(text)
       if (text === 'OK') {
          $('div.fundoDiv').css("background-color", "green");
        } else {
          $('div.fundoDiv').css("background-color","red");
        }
    });

<!-- language: lang-html -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="data">
        <div class="fundoDiv">
            <section>
                <header class="textoHeader">Risk</header>
            </section>
        <span id="b74ac226bea04e10a80e25bbf7e529a3" style="font-family:'Arial';font-size:37px;">
    <span id="f95f8aba-1b60-4174-9354-8945634b6179" viewid="f95f8aba-1b60-4174-9354-8945634b6179" class="EmbeddedMiniatureVisualization" sf-busy="false" style="position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;">
    <span style="color: rgb(97, 100, 107); text-align: left;">OK</span></span></span>
    </div>

<!-- end snippet -->

英文:

You forgot to trim your text to remove white spaces and compare instead of an assignment:

$(&quot;.fundoDiv span.EmbeddedMiniatureVisualization:last-child&quot;).each(function() {
    var text = $(this).text().trim();
    console.log(text)
   if (text === &#39;OK&#39;) {
      $(&#39;div.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;green&quot;);
    } else {
      $(&#39;div.fundoDiv&#39;).css(&quot;background-color&quot;,&quot;red&quot;);
    }
});

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;data&quot;&gt;
    &lt;div class=&quot;fundoDiv&quot;&gt;
        &lt;section&gt;
            &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
        &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OK&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;

答案2

得分: 0

Use $(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").text().trim().

$(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").each(function() {
    var text = $(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").text().trim();
    console.log("{"+text+"}");
    if (text == 'OK') {
        $('div.fundoDiv').css("background-color", "green");
    } else {
        $('div.fundoDiv').css("background-color","red");
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
    <div class="fundoDiv">
        <section>
            <header class="textoHeader">Risk</header>
        </section>
        <span id="b74ac226bea04e10a80e25bbf7e529a3" style="font-family:'Arial';font-size:37px;">
            <span id="f95f8aba-1b60-4174-9354-8945634b6179" viewid="f95f8aba-1b60-4174-9354-8945634b6179" class="EmbeddedMiniatureVisualization" sf-busy="false" style="position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;">
                <span style="color: rgb(97, 100, 107); text-align: left;">OKf</span>
            </span>
        </span>
    </div>
</div>

英文:

Use $(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").text().trim()

$(&quot;.fundoDiv span.EmbeddedMiniatureVisualization:last-child&quot;).each(function() {
    var text = $(&quot;.fundoDiv span.EmbeddedMiniatureVisualization:last-child&quot;).text().trim();
    console.log(&quot;{&quot;+text+&quot;}&quot;);
    if (text == &#39;OK&#39;) {
      $(&#39;div.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;green&quot;);
    } else {
      $(&#39;div.fundoDiv&#39;).css(&quot;background-color&quot;,&quot;red&quot;);
    }
});

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;data&quot;&gt;
    &lt;div class=&quot;fundoDiv&quot;&gt;
        &lt;section&gt;
            &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
        &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OKf&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;

答案3

得分: 0

在 if 内部，你不是在进行比较，而是在进行赋值，所以需要修正这一点。 (= 是赋值操作符，== 或 === 用于比较)
对文本进行修剪，以便在比较时忽略任何开头/结尾的空格。
你需要同时使用 .closest() 来获取相应的 fundoDiv div，以便在比较成功或失败后执行操作（因为你正在循环遍历 fundoDiv 内部的 span，而不是 fundoDiv 本身，所以 $(this) 实际上会反映为 <span>）。

工作代码片段:

$(document).ready(function() {
  $(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").each(function() {
    var text = $(this).find('span').text().trim();
    if (text === 'OK') {
      $(this).closest('.fundoDiv').css("background-color", "green");
    } else {
      $(this).closest('.fundoDiv').css("background-color", "red");
    }
  });
});

如果你的具有 class EmbeddedMiniatureVisualization 的 span 包含多个 span，并且你想要搜索和匹配它们中的每一个，那么可以按照以下方式进行：**

$(document).ready(function() {
  $(".fundoDiv span.EmbeddedMiniatureVisualization:last-child").each(function() {
    var obj = $(this);
    var isTextFound = false;
    obj.find('span').each(function() {
      if ($(this).text().trim() == 'OK') {
        isTextFound = true;
        return;
      }
    });
    if (isTextFound) {
      obj.closest('.fundoDiv').css("background-color", "green");
    } else {
      obj.closest('.fundoDiv').css("background-color", "red");
    }
  });
});

希望这对你有所帮助！

英文:

Inside if You are not comparing, you are doing an assignment so fix that. (= is assignment and == or === used for comparison)
Trim the text so that in case any starting/trailing space is there then they will get neglected while comparison.
You need to use .closest() as well to get the corresponding fundoDiv div after the comparison becomes successful or fails. (because you are looping over the span inside fundoDiv not on the fundoDiv itself so $(this) will reflect <span> actually)

Working snippet:

$(document).ready(function() {

  $(&quot;.fundoDiv span.EmbeddedMiniatureVisualization:last-child&quot;).each(function() {
    var text = $(this).find(&#39;span&#39;).text().trim();
    if (text === &#39;OK&#39;) {
      $(this).closest(&#39;.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;green&quot;);
    } else {
      $(this).closest(&#39;.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;red&quot;);
    }
  });
});

.fundoDiv{
  margin-bottom : 20px;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;data&quot;&gt;
  &lt;div class=&quot;fundoDiv&quot;&gt;
    &lt;section&gt;
      &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
    &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OK&lt;/span&gt;&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;

  &lt;div class=&quot;fundoDiv&quot;&gt;
    &lt;section&gt;
      &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
    &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;Not OK&lt;/span&gt;&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;fundoDiv&quot;&gt;
    &lt;section&gt;
      &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
    &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OK&lt;/span&gt;&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

In case your span with the class EmbeddedMiniatureVisualization contains multiple spans, and you want to search and match each of them then do like below:

$(document).ready(function() {

  $(&quot;.fundoDiv span.EmbeddedMiniatureVisualization:last-child&quot;).each(function() {
    var obj = $(this);
    var istextFound = false;
    obj.find(&#39;span&#39;).each(function() {
      if ($(this).text().trim() == &#39;OK&#39;) {
        istextFound = true;
        return;
      }
    });
    if (istextFound) {
      obj.closest(&#39;.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;green&quot;);
    } else {
      obj.closest(&#39;.fundoDiv&#39;).css(&quot;background-color&quot;, &quot;red&quot;);
    }
  });
});

.fundoDiv{
  margin-bottom : 20px;
}

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;div class=&quot;data&quot;&gt;
  &lt;div class=&quot;fundoDiv&quot;&gt;
    &lt;section&gt;
      &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
    &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
    &lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OK&lt;/span&gt;
    &lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;Not OK&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;

  &lt;div class=&quot;fundoDiv&quot;&gt;
    &lt;section&gt;
      &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
    &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;Not OK&lt;/span&gt;
    &lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;Not OK&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;

  &lt;div class=&quot;fundoDiv&quot;&gt;
    &lt;section&gt;
      &lt;header class=&quot;textoHeader&quot;&gt;Risk&lt;/header&gt;
    &lt;/section&gt;
    &lt;span id=&quot;b74ac226bea04e10a80e25bbf7e529a3&quot; style=&quot;font-family:&#39;Arial&#39;;font-size:37px;&quot;&gt;
&lt;span id=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; viewid=&quot;f95f8aba-1b60-4174-9354-8945634b6179&quot; class=&quot;EmbeddedMiniatureVisualization&quot; sf-busy=&quot;false&quot; style=&quot;position: relative; margin: 0px; padding: 0px; border: 0px; overflow: hidden;&quot;&gt;
&lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;OK&lt;/span&gt;
    &lt;span style=&quot;color: rgb(97, 100, 107); text-align: left;&quot;&gt;Not OK&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;
&lt;/div&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

在一个嵌套的标签中检索文本？

问题

答案1

答案2

答案3

如何在图像的两侧半边上获得渐变边框，如附图所示。

从React到Node服务器的ajax调用中的数据未定义。

从数据库中提取隐藏的product_id以填充jQuery自动完成插件列表。

如何使用D3.js的nest()和rollup()来控制返回顺序？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论