Question

假设我的DOM看起来像这样（纯粹是虚构的例子）：

<div>
  <img id="img1" />
  Text 1
</div>

<img id="img2" />

<div>
  <p>Text 2</p>
  <div>
    <img id="img3" />
  </div>
  <img id="img4" />
</div>

我尝试做的是找到连续元素之间的所有文本（如果有的话），与嵌套级别无关（所以在这种情况下，我会在{{1}之间找到Text1 } #img1，#img2介于Text 2和#img2之间，而{/ 1}}和#img3之间没有空字符串

我事先并不知道如何构建dom。

我尝试过使用JQuery＆＃39; nextUntil()，但这似乎只适用于兄弟节点。

Answer 1

您可以使用contents()方法返回所有子节点，包括文本节点这样，执行$('body *').contents().addBack()会返回DOM的展平表示。

现在，您可以在img（或任何您想要的标签）元素之间进行迭代，并获取文本节点（的nodeType为3 ）

＆＃13;

function textBetweenTags(tag){
  var contents = $('body *').contents().addBack(),
      allOfType = contents.filter(tag),
      count = allOfType.length,
      map = allOfType.map(function(){return contents.index( this );}),
      texts = [];
  
  
  for (var i = 0, l = map.length-1; i < l; i++){
    var start = map[i],
        end = map[i+1],
        textnodes = contents.slice(start,end).get().filter(function(item,index){return item.nodeType===3;});
    texts.push( {
      start: contents[start],
      end: contents[end],
      text: $.trim($(textnodes).text()) 
    });
  }
  return texts.filter(function(item,index){return item.text !== '';});
}

var texts = textBetweenTags('img');

console.log(texts);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <img id="img1" />
  Text 1
</div>

<img id="img2" />

<div>
  <p>Text 2</p>
  <div>
    <img id="img3" />
  </div>
  <img id="img4" />
</div>

＆＃13;

Answer 2

我认为我的解决方案更接近您指定的内容。这也是使用contents()，但也会根据ID进行遍历/过滤。

function textBetweenIds(firstId, lastId) {
    var texts = [],
        betweenIds = false,
        recurse = function ($item) {
            $item.each(function() {
                var text,
                    $item = $(this),
                    itemId = $item.attr("id"),
                    contents = $item.contents();
                if (itemId == firstId) {
                    betweenIds = true;
                } else if (itemId == lastId) {
                    betweenIds = false;
                }
                if (contents.length == 0 && betweenIds) {
                    text = $item.text().trim();
                    if (text != undefined && text.length > 0) {
                        texts.push(text);
                    }
                }
                recurse(contents);
            });
            return texts;
        };
    recurse($("body"));
    return texts;
}

result = textBetweenIds("img1", "img3");
// result: ["Text 1", "Text 2"]

DOM - 在任意嵌套元素之间查找文本

2 个答案: