Question

我正在尝试使用jquery根据其dd文本内容向dl元素添加一个类。我的目标是，如果带有dd类的productView-info-value中包含文本“ No”，我想在其整个行中添加一个类（这样我就可以隐藏该行）-或者可以删除（）-但我似乎无法从dl获取父dd。

<dl class="productView-info">
    <dt class="productView-info-name">
        title of YAY SHOW ME
    </dt>
    <dd class="productView-info-value">
        YAY SHOW ME
    </dd>
</dl>
<dl class="productView-info">
    <dt class="productView-info-name">
            Titl of NO HIDE ME
    </dt>
    <dd class="productView-info-value">
        No
    </dd>
</dl>
<dl class="productView-info">
    <dt class="productView-info-name">
        Title of NO HIDE ME TOO
    </dt>
    <dd class="productView-info-value">
        No
    </dd>
</dl>

这是我用jquery尝试过的方法：

$('dd').filter(function(){
    return $.trim($(this).text()) === "No";  //have to trim whitespace!
}).closest('dl')
  .addClass('prod-modal-noshow');

我也尝试使用过滤器$('dd','.productView-info-value')，但这也不起作用。我非常感谢您的指导，谢谢！

Answer 1

当您的jQuery对象包含一个以上的元素时，可以使用$.each函数对其进行迭代。

$('dd').filter(function() {
    return $.trim($(this).text()) === "No";
  } //have to trim whitespace!
).each( function( ind, obj ) {
  $( obj ).closest('dl').addClass('prod-modal-noshow');
});

.prod-modal-noshow {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl class="productView-info">
  <dt class="productView-info-name">
                            title of YAY SHOW ME
                        </dt>
  <dd class="productView-info-value">
    YAY SHOW ME
  </dd>

</dl>
<dl class="productView-info">
  <dt class="productView-info-name">
                           Titl of NO HIDE ME
                        </dt>
  <dd class="productView-info-value">
    No
  </dd>

</dl>
<dl class="productView-info">
  <dt class="productView-info-name">
                            Title of NO HIDE ME TOO
                        </dt>
  <dd class="productView-info-value">
    No
  </dd>

</dl>

Answer 2

嘿，这对我有用：

$('dd').filter(function()
{return $.trim($(this).html()) === "No";}  //have to trim whitespace!
).parent('dl').addClass('prod-modal-noshow');\

如果需要，您可以添加.remove()，它将删除整个<dl>

如果您将html()交换为text()，也可以使用

希望这会有所帮助！

jQuery查找带有文本的dd或dt元素

2 个答案: