合并排序不起作用 - Javascript代码：即使在调试后也无法找到错误

Question

Rasec Malkic

Asked: 2024-04-14 18:35:05 +0800 CST2024-04-14 18:35:05 +0800 CST 2024-04-14 18:35:05 +0800 CST

元素的 Xpath 仅基于文本内容？

772

我试图获取此 HMTL代码的第二个按钮“购买”的 xpath，但不使用 class、id 或其他属性或完整的 Xpath，仅使用与其相关的文本内容，如本例所示。该代码在“div”内有 2 个“ul”元素。每个“ul”有3或4个“li”。我想要这样，因为内部属性发生了变化，但结构和文本内容仍然存在。

我的目标是拥有第二个“Buy”的 Xpath，即与包含文本“Home”的“li”相关的 Xpath。

到目前为止，我在 Chrome 控制台中的尝试如下所示，但不起作用：

$x("//*[text()='Home']")
$x("//ul[text()='Home']")
$x("//*[text()='Home']/following-sibling::li")

在下图中我展示了它。

div {
    background-color:#eeeeee;
    display:inline;      
}

#ul li {
  display: grid;
    column-count: 4;
    column-gap: 20px;
    display: inline;
}

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div>
<ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                                                Electronics
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><!----></div>
            </div>
        </div></li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Cameras
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----></div>
            </div>
            <div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                                                4K Front
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><div class="xyzq-list-column column-unshrink button-column ">
                        <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div></li>

</ul>

<ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view"><div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view"><div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                                                Home
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><!----></div>
            </div>
        </div></li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view"><div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view"><div class="xyzq-list-column flex-width fixed-width">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Appliances
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----></div>
            </div>
            <div class="xyzq-list-column flex-width ">
                <div class="xyzq-list-item">
                    <div class="xyzq-list-column flex-width ">
                        <div class="xyzq-list-item inner-list-item " style="">
                            <div class="xyzq-list-column flex-width column-unshrink ">
                                <div class="xyzq-list-item">
                                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                                                Fans
                                    </div>
                                </div>
                                <!----><!----><!----><!----></div>
                        </div>
                    </div>
                    <!----><div class="xyzq-list-column column-unshrink button-column ">
                        <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
                        </div>
                    </div>
                </div>
            </div>
        </div></li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw53" class="daw-view"><button data-dqa-button="list" tabindex="0" data-components="xyzq-li-button-row" id="daw54" class="daw-view"><div class="xyzq-list-item ">
                <div class="xyzq-list-column flex-width ">
                    <div class="xyzq-list-item">
                        <div class="xyzq-list-column flex-width ">
                            <div class="xyzq-list-item inner-list-item " style="">
                                <div class="xyzq-list-column flex-width column-unshrink ">
                                    <div class="xyzq-list-item">
                                        <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Discount Code
                                        </div>
                                    </div>
                                    <!----><!----><!----><!----></div>
                            </div>
                        </div>
                        <div class="xyzq-list-column column-unshrink icon-drilldown " title="Select" data-dqa-img="drilldown"/>
                        <!----></div>
                </div>

            </div>
        </button></li>
</ul>



</div>
</body>
</html>

1 个回答

Voted

hedfol · Answer 1 · 2024-04-14T19:41:48+08:00

要通过文本匹配元素，contains()可以使用（如评论中已经建议的那样）。

一部分following-sibling是正确的，后面应该跟一个button表达式。

//li[contains(., "Home")]/following-sibling::li//button[contains(., "Buy")]

document.getElementById('find').addEventListener('click', () => {
  const xpath = '//li[contains(., "Home")]/following-sibling::li//button[contains(., "Buy")]';
  const buy = document.evaluate(xpath, document, null,
    XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
  buy.style.background = 'green';
});

div {
  background-color: #eeeeee;
  display: inline;
}

#ul li {
  display: grid;
  column-count: 4;
  column-gap: 20px;
  display: inline;
}

#find {
  font-weight: bold;
}

<div>
  <ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view">
      <div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view">
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                      Electronics
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view">
      <div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view">
        <div class="xyzq-list-column flex-width fixed-width">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                      Cameras
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
          </div>
        </div>
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                      4K Front
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <div class="xyzq-list-column column-unshrink button-column ">
              <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>

  </ul>

  <ul>
    <li data-dqa-li="" data-components="xyzq-li" id="daw48" class="daw-view">
      <div data-components="xyzq-li-row" id="daw49" class="xyzq-list-item section-title daw-view">
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text section-title-text" dir="ltr" data-dqa-message="">
                      Home
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <!---->
          </div>
        </div>
      </div>
    </li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw50" class="daw-view">
      <div data-components="xyzq-li-row" id="daw51" class="xyzq-list-item daw-view">
        <div class="xyzq-list-column flex-width fixed-width">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                      Appliances
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
          </div>
        </div>
        <div class="xyzq-list-column flex-width ">
          <div class="xyzq-list-item">
            <div class="xyzq-list-column flex-width ">
              <div class="xyzq-list-item inner-list-item " style="">
                <div class="xyzq-list-column flex-width column-unshrink ">
                  <div class="xyzq-list-item">
                    <div class="xyzq-list-column main-text bold-text description-regular" dir="ltr" data-dqa-message="">
                      Fans
                    </div>
                  </div>
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
              </div>
            </div>
            <!---->
            <div class="xyzq-list-column column-unshrink button-column ">
              <div data-components="xyzq-button" id="daw52" class="list-cam-narrow-button expand-taparea button daw-view"><button tabindex="0" class="secondary-button row-button text-button disabled-loading-caption" data-dqa-button="secondary" type="button"><span dir="ltr" class="caption">Buy</span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li data-dqa-li="" data-components="xyzq-li" id="daw53" class="daw-view"><button data-dqa-button="list" tabindex="0" data-components="xyzq-li-button-row" id="daw54" class="daw-view"><div class="xyzq-list-item ">
                <div class="xyzq-list-column flex-width ">
                    <div class="xyzq-list-item">
                        <div class="xyzq-list-column flex-width ">
                            <div class="xyzq-list-item inner-list-item " style="">
                                <div class="xyzq-list-column flex-width column-unshrink ">
                                    <div class="xyzq-list-item">
                                        <div class="xyzq-list-column main-text description-regular" dir="ltr" data-dqa-message="">
                                                Discount Code
                                        </div>
                                    </div>
                                    <!----><!----><!----><!----></div>
                            </div>
                        </div>
                        <div class="xyzq-list-column column-unshrink icon-drilldown " title="Select" data-dqa-img="drilldown"/>
                        <!----></div>
                </div>

            </div>
        </button></li>
  </ul>



</div>

<button id="find">FIND A BUTTON</button>

元素的 Xpath 仅基于文本内容？

Vue 3：创建时出错“预期标识符但发现‘导入’”[重复]

为什么这个简单而小的 Java 代码在所有 Graal JVM 上的运行速度都快 30 倍，但在任何 Oracle JVM 上却不行？

具有指定基础类型但没有枚举器的“枚举类”的用途是什么？

如何修复未手动导入的模块的 MODULE_NOT_FOUND 错误？

`(表达式，左值) = 右值` 在 C 或 C++ 中是有效的赋值吗？为什么有些编译器会接受/拒绝它？

何时应使用 std::inplace_vector 而不是 std::vector？

在 C++ 中，一个不执行任何操作的空程序需要 204KB 的堆，但在 C 中则不需要

PowerBI 目前与 BigQuery 不兼容：Simba 驱动程序与 Windows 更新有关

AdMob：MobileAds.initialize() - 对于某些设备，“java.lang.Integer 无法转换为 java.lang.String”

我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

元素的 Xpath 仅基于文本内容？

1 个回答

相关问题