Question

我想操纵一些我无法直接控制的HTML。

我可以使用JavaScript定位两个元素，然后是一些......好吧，它们之间有一些浮动文本。

    <div id="anOuterDiv">

  <div class="variousOtherElements">blah can contain dashes - oh yes it can</div>

  <div class="someOtherElements">blah can contain dashes - oh yes it can</div>

  <span class="branch">Some City Public Library</span> - <span class="location">Story Room</span>

</div>

基本上，我只需要删除或隐藏span.branch和span.location ......以及它们之间的短划线。现在我通过CSS隐藏了两个跨度，短划线就漂浮在那里......

所有元素的内容都可能有所不同。其他元素中可能会出现破折号。

jQuery或纯JavaScript解决方案都很有用。我一直无法找到一种方法来瞄准那个只是挂在那里的破折号。我需要隐藏它并让它不占用空间。

Answer 1

您无法在TextNode上应用CSS。

您可能希望将其包装成<span>然后隐藏它。或者只是将其设置为空白。

您可以使用document.querySelector('.branch').nextSibling找到它。

例如：

document.querySelector('.branch').nextSibling.textContent = '';

Answer 2

您可以将 branch 和 location 类包含在一个新的div（它们自己的容器）中，以及它们之间的任何兄弟。然后，您可以根据需要隐藏或删除它们：

see Plunkr

$(document).ready(function() {

  $('.branch').each(function() {

    var to_wrap   = [this];
    var _sib      = this;
    var _continue = true;

    while (_continue && (_sib = _sib.nextSibling) && (_sib.className === undefined || _sib.className == 'location')) {
      to_wrap[to_wrap.length] = _sib;

      if (_sib.className == 'location')
        _continue = false;
    }

    buildHiddenDivRow(to_wrap, $(this).parent());

  });

});


function buildHiddenDivRow(arr, $parentElement) {
  $('<div />', {
    'class': 'branch-location',
    'style': 'display:none'
  }).prepend(arr).appendTo($parentElement);
}

我没有多想算算法，但我确实清理了一些算法。我确信有足够的优化空间，使其更简洁和/或可读。

注意事项：

这不保留排序，只将它放在容器的末尾， anOuterDiv
它没有专门查找文本节点或任何元素，它通过className查找完全匹配。如果具有 location 类的元素具有附加类（例如，class="location span"），或者没有具有 location 类的元素，则这将导致无限循环并挂起浏览器。

出于这些原因以及更多原因， 将此作为参考而非生产就绪代码 。

Answer 3

围绕文本节点（破折号）包裹隐藏的范围，如下所示：

var dashTextNode = $('.branch')[0].nextSibling;  //this will get the dash after .branch span
$(dashTextNode).wrap('<span style="display:none"></style>');

JavaScript - 在两个元素之间定位一个字符串

3 个答案:

see Plunkr

注意事项：