jQuery toggle() 并且只复制可见文本而不使用 remove()

Question

这是我的代码:

<div class="post-content">
    <span class="togglers complete">
        <a class="toggler" href="#" title="change" style="display: none;">I'm sending</a>
        <span class="divider" style="display: none;">|</span>
        <a class="toggler selected" href="#" title="change">We're sending</a>
        <span class="divider" style="display: none;">|</span>
        <a class="toggler" href="#" title="change" style="display: none;">I've sent</a>
        <span class="divider" style="display: none;">|</span>
         <a class="toggler" href="#" title="change" style="display: none;">We've sent</a>
    </span>
    you a message with that information so let me know if you don't receive it.
</div>

我试图只获取屏幕上可见的 .toggler。我设置了一个按钮，所以当我单击它时，它会将句子记录在控制台中以进行测试。我开始于:

$(this).siblings(".post-content").find(':hidden').remove().end().text().replace(/\s+/g, " ")

这是有效的，直到我在单击按钮后尝试单击 .toggler，但由于它们已被删除，因此它们不会显示。

所以我尝试了这样的事情:

console.log($(this).siblings(".post-content").find().not(':hidden').end().text().replace(/\s+/g, " ")) 

因为它返回null

为了增加复杂性，他们还对所有应用了 visiblity:visible，因为它们在弹出模块(Foundation 的显示)中并继承了样式，所以我不能做

$(this).siblings(".post-content").not(':hidden').end().text().replace(/\s+/g, " ") 

因为它展示了一切。

我正在尝试按照如果它不是display:none 则显示它的方式进行操作。所以理想情况下，在这个例子中，我最终会得到:

我们正在向您发送包含该信息的消息，如果您没有收到，请告诉我。

Here's the fiddle与原始代码行。

Answer 1

如果您向每个元素添加一个名为“exclude”的类，然后在父 div 的子级上调用 toggle 会怎么样？

$(".post-content").children(":not(.exclude)").toggle();