javascript - 找到一个 <div> ，其中包含一个 <p> ，里面有给定的文本

Question

我有一个应用程序显示了几个 <div> block ，每个 block 都有给定的 id .每个 block 都有一个内部 <p name="barcode"></p>标签。

我想知道如何在 Javascript 函数中搜索 <p name="barcode"></p>其中包含给定的条形码并返回容器的 ID <div> .

它可以使用 jQuery 或 Javascript，无论哪个更容易。我还可以将给定的属性或类分配给容器 <div>如果这样更容易找到它。

注意:代码使用 {{ }} 作为变量，因为页面是在 Jinja2 中生成的，但问题与常规 jQuery 相关。

<div id="{{ item.id }}" position="{{ item_number }}" href="#" state="{{ item.state }}" class="popup-box bs-callout bs-callout-{{ item.state }}">
        <div class="row">
                <div class="col-xs-10">
                        <div class="row">
                                ...
                                <div class="col-xs-12">
                                        <p name="barcode" style="color: grey; padding: 0px; margin: 0px;">{{ item.barcode }}</p>
                                </div>
                                ...
                        </div>
                        ...
                </div>
                ....
        </div>
</div>
...

Answer 1

使用 jQuery，您可以搜索类 .barcode 的 div，其中包含如下特定文本:

$(".barcode:contains(some_specific_text)")

然后您可以使用 .parent() 方法获取父级——如果您知道它是唯一的，则不必对其进行过滤，否则您可能想要使用.eq()。然后你可以通过 .attr('id') 获取 id。

放在一起:

$(".barcode:contains(some_specific_text)").parent().attr('id')