Question

我想在标记后隐藏某些文字。

我的HTML是：

<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

jQuery的：

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');

上面的jQuery只删除第一个元素的文本，而不是两个。

如何修改它以便从两个元素中删除文本。

Fiddle

Answer 1

只需考虑通过each()函数循环遍历元素并隐藏每个<strong>元素的下一个兄弟：

// Loop through each strong element
$('.listing_detail strong').each(function(){
  // Find it's next sibling and wrap it
  $(this.nextSibling).wrap('<span style="display:none"></style>');
});

示例

$('.listing_detail strong').each(function(){ $(this.nextSibling).wrap('<span style="display:none"></style>'); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div> <div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

Answer 2

为什么不使用.each()并逐个隐藏？

$('.listing_detail strong').each( function(){
  $($(this)[0].nextSibling).wrap('<span style="display:none"></style>');
});

Answer 3

为什么不简单

$('.listing_detail strong').hide();

Answer 4

还添加此项以从第二个元素中删除文本：

$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');

所以它将是：

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
 $($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');

Answer 5

试试这个：

$($('.listing_detail strong')[0].nextSibling).wrap('<span style="display:none"></style>');
$($('.listing_detail strong')[1].nextSibling).wrap('<span style="display:none"></style>');

Answer 6

我认为问题是$（＆＃39; .listing_detail strong＆＃39;）上的[0]选择器。使用类似于＆＃39; forEach＆＃39;的遍历方法代替。 https://jsfiddle.net/d4gyv6ed/12/

$('.listing_detail strong').each(function(index){
    $(this).siblings().wrap('<span style="display:none"></style>');
});

Answer 7

如果你不需要索引，最好不要搞砸。像这样更新您的标记：

<div class="listing_detail col-md-4"><strong>Living Room:</strong> 
    <div class="hide-this-tag">Yes</div>
</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> 
    <div class="hide-this-tag">No</div>
</div>

然后使用jQuery执行此操作：

$(".hide-this-tag').hide();

或者只是简单地使用css：

.hide-this-tag {
   display:none;
}

Answer 8

如果您要查找的只是特定标记中的文本节点，则无论文本节点在标记内的位置如何，这种方法都是最有效的方法。

尝试使用.contents()和.filter()方法，this.nodeType == 3如下：

$('.listing_detail').contents().filter(function() {
    return this.nodeType == 3;
})
.wrap('<span style="display:none;"/>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div>
<div class="listing_detail col-md-4"><strong>Kitchen:</strong> No</div>

Answer 9

我要做的是创建一个具有隐藏属性的CSS类，并使用您的jQuery将它们添加到容器中。

这使您可以轻松地在将来添加和删除类。

这应该可以帮助你做到这一点

https://api.jquery.com/addclass/

要将它应用于多个div，请使用jquery中的每个函数

https://api.jquery.com/each/

使用jQuery在标记后隐藏文本

9 个答案: