javascript - Jquery finding a specific H4 with no id nor name nor class - Stack Overflow

admin管理员组

文章数量:1336178

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.

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.

• javascript
• jquery
• html
• each

Share Follow edited Jul 17, 2014 at 13:33 Gaelle asked Jul 17, 2014 at 10:26 GaelleGaelle 61411 gold badge77 silver badges3030 bronze badges 4

• maybe with match() w3schools./jsref/jsref_match.asp – TCHdvlp Commented Jul 17, 2014 at 10:28
• What's unique about that h4? Is it its text value? – FloatingRock Commented Jul 17, 2014 at 10:28
• in this case you can only find them by their text or html, or by their order (the order they are implemented on your code) – Amin Jafari Commented Jul 17, 2014 at 10:28
• @TCHdvlp My humble request is to stop sharing links to w3schools. Worst place to learn web technologies. – T J Commented Jul 17, 2014 at 10:30

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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.

Try this :

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

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.

$("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.

Try this: FIDDLE

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

本文标签： javascriptJquery finding a specific H4 with no id nor name nor classStack Overflow