javascript - 如果字符串参数等于div的文本，如何隐藏最近的标签

Question

如果文本中的文本div.level等于变量中的文本，dlevel我想隐藏最接近该 div 的标签。

我无法直接编辑 HTML，它是由软件自动创建的，所以我无法编辑 div.level 中的文本。变量“dlevel”实际上是从 URL 参数中提取的。我可以更改此参数（“dlevel”的值），因为它可能是包含“$”的问题。但是，这需要通用，以便如果参数为 50，则隐藏 50 的标签而不是 500 的标签，反之亦然。任何帮助将不胜感激。

var dlevel = '$50'; 

$('div.level').filter(function () { 
  return $(this).text() == dlevel;
}).closest('label').hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="level-container">
    <label>
        <div class="level">
            $50
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $100
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $500
        </div>
    </label>
</div>

标签： javascriptjquery

Answer 1

我认为您使用了错误的方法。

.level您可以使用 jQuery遍历 diveach()并获取textContent每个 div 的。

然后您需要做的就是检查文本是否等于 的值dlevel，如果是，则获取最接近的标签closest()（遍历 DOM）并将其隐藏。

var dlevel = '$50'; 

$('div.level').each(function(){
  let text = this.textContent.trim(); //or this.innerText.trim() 
  if (text == dlevel){
    $(this).closest('label').hide()
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="level-container">
    <label>
        <div class="level">
            $50
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $100
        </div>
    </label>
</div>

<div class="level-container">
    <label>
        <div class="level">
            $500
        </div>
    </label>
</div>