CODEWITHSUNDEEP
javascriptjquery
M.E.
M.E.

Reputation: 5496

Find a <div> which contains a <p> with a given text inside

I have an application which presents several <div> blocks, each one with a given id. Each block has an inner <p name="barcode"></p> tag.

I would like to know how to, inside a Javascript function, search for the <p name="barcode"></p> which contains a given barcode and return the id of the container <div>.

It could use jQuery or Javascript, whatever is easier. I could also assign a given attribute or class to the container <div>if that makes easier to find it.

Note: the code uses {{ }} for variables, as pages are generated in a Jinja2, but the question relates to regular 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>
...

Upvotes: 1

Views: 47

Answers (3)

Priya
Priya

Reputation: 1470

Please try this $('[name="barcode"]').closest(".popup-box").attr('id');

Upvotes: 0

Lakindu Gunasekara
Lakindu Gunasekara

Reputation: 4271

You can access by giving a class name to your div tag and then access via the following jquery. Try this and see

<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 item">
              <p name="barcode" style="color: grey; padding: 0px; margin: 0px;">{{ item.barcode }}</p>
           </div>
           ...
        </div>
        ...
     </div>
     ....
   </div>
</div>
...

JQUERY

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

Upvotes: 1

Alexander Nied
Alexander Nied

Reputation: 13623

Using jQuery, you can search for a div of class .barcode that contains specific text like this:

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

You can then get the parent using the .parent() method-- if you know that that it is unique, you don't have to filter it down, otherwise you might want to use .eq(). Then you can get the id with .attr('id').

Put it all together:

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

Upvotes: 2

Related Questions