使用 js中 xpath 获取相对位置的元素

Question

假如现在这如下的html结构

<div>
  <div class="w">
    <div>
      <div>
        <div class="c l">
          <div>有些内容</div>
          <div>有些内容</div>
          <div>有些内容</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c r">
          <div>有些内容</div>
          <div>有些内容</div>
          <div>有些内容</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c l">
          <div>有些内容，固定会出来某字</div>
          <div>有些内容，固定会出来某字</div>
          <div>有些内容，固定会出来某字</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c r">
          <div>有些内容</div>
          <div>有些内容</div>
          <div>有些内容</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c l">
          <div>有些内容</div>
          <div>有些内容</div>
          <div>有些内容</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c r">
          <div>有些内容</div>
          <div>有些内容</div>
          <div>有些内容</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c r">
          <div>有些内容</div>
          <div>有些内容</div>
          <div>有些内容</div>
        </div>
      </div>
    </div>
  </div>
</div>

首先这个 html 结构是以 l,r 接连出现的，
就是出现 class 为 l（数量不固定）后会出现 class 为 r（数量不固定）

在这个情况下

怎么用 浏览器的 xpath（或者其它好的方式）

以其中会出现固定内容且class 为 l 的的 div 位置

匹配到 class 为 l 到接连 class 为 r 一段中的所有内容

比如正确的匹配到的结果是

  <div class="w">
    <div>
      <div>
        <div class="c l">
          <div>有些内容，固定会出来某字</div>
          <div>有些内容，固定会出来某字</div>
          <div>有些内容，固定会出来某字</div>
        </div>
      </div>
    </div>
  </div>
  <div class="w">
    <div>
      <div>
        <div class="c r">
          <div>有些内容7</div>
          <div>有些内容8</div>
          <div>有些内容9</div>
        </div>
      </div>
    </div>
  </div>
  <!--  因为后面接的了是 class 为 l 的理应中断 -->

如果有其它语言更好实现，也可以推荐一下

Answer 1

不会用 XPath，不过这个比较规律的东西貌似处理起来也不是很复杂。

const result = [...document.querySelectorAll("div.c")]
  .map(el => {
    const mark = el.classList.contains("l") ? "l" : "r";
    return {
      w: el.closest(".w"),
      c: el,
      k: mark
    };
  })
  .reduce((acc, it) => {
    if (it.k === "l") {
      acc.unshift([it])
    } else {
      acc[0].push(it);
    }
    return acc;
  }, [])
  .reverse()
  .map(arr => arr.map(({w}) => w));

// 为了演示效果，高亮每组第一个 w
result.forEach(([w]) => {
  w.style.background = "#ffffee";
  w.style.borderTop = "2px solid #eeee99";
})

演示：JS Bin 上演示