CODEWITHSUNDEEP
javascriptjqueryhtmleach
Gaelle
Gaelle

Reputation: 614

Jquery finding a specific H4 with no id nor name nor class

i have a simple question about JQuery...

I have a main <div> containing some divs, which have dynamical ids. each child div has a <h4> tag in it. These h4 does not have any id, nor class, nor name. They just have some text in it.

Here is what i'm talking about :

<div id="main_div">
   <div id ="div01">
      <h4>Sometext01</h4>
   </div>
   <div id ="div02">
      <h4>Sometext02</h4>
   </div>
   <div id ="div03">
      <h4>Special Text!!!</h4>
   </div>
   <div id ="div04">
      <h4>Sometext04</h4>
   </div>
</div>

I would like to get the parent div's id of the h4 which text is "Special text!!!" (so, here, in this example, it is div03).

But, unfortunately, these ids are auto generated (by Sugarcrm, for those who know), and i can't know by advance the id's name. So that is why i have to pass by the h4.

I know i can use the jQuery function below to pass through all h4

allMyH4.each()

And i know i can use the jQuery function below to find the parent of my desired h4

myFoundH4.parent()

But i'm getting some trouble on searching the h4 by their text() (or html() )

Could you please help me on that?

Thanks a lot

EDIT few hours later :

Thanks to @Bhushan , i could do what i really wanted. It just has a restriction : my user MUST not change h4 texts NOR giving several h4 the same name containing my string. For another solution, try @rory too, it did not work for me, but it had been tested by others, and it seems to be better than contains.

Upvotes: 2

Views: 2463

Answers (5)

blgt
blgt

Reputation: 8205

Have you tried :contains()?

var divId = $("h4:contains('Special Text!!!')").parent().attr('id');

If there's other <h4> tags containing text which includes your Special Text!!!, but you don't want to select them, you can use .filter() as @Rory's answer says:

var divId = $("h4:contains('Special Text!!!')").filter(function(i, elt) {
    return $(elt).text() === 'Special Text!!!';
}).parent().attr('id');

However if you have multiple <h4>s with this text, it could still match multiple elements.

Upvotes: 2

DWX
DWX

Reputation: 2340

Try this: FIDDLE

$("h4").each(function(){
    if($(this).text() === 'Special Text!!!')
    {
        var pid = $(this).parents().attr("id");     
        alert(pid); 
    }
});

Upvotes: 0

Stevanicus
Stevanicus

Reputation: 7761

$("h4").each(function(inx, elem){
    var pattern = "Special Text!!!", el = $(elem);
    if(el.text() == pattern){
         console.info(el.parent().attr("id"));
    }
});

Update: Roy McCrossan has a good solution.

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this :

$(function(){
var parentId = $('main_div').find('h4:contains("Special Text!!!")').parent().attr('id');
});

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337637

You can use filter():

var $h4 = $('h4').filter(function() {
    return $(this).text() == 'Special Text!!!';
});
console.log($h4.parent().prop('id'));

This will ensure an exact match on the text property, not a partial match as the :contains selector will give. filter should also be faster.

Upvotes: 5

Related Questions