javascript - Accessing the nested div with same class names but different test using jquery - Stack Overflow

admin管理员组

文章数量:1392099

I want to iterate through the div structure.Actually, what I want is if I have different div structures with same class name e.g. mod and I want to check the internal div whose class name is title. The only difference between them are the contents of the div with class name title have text as hello1 and for other its hello2.

Here is the Structure

<div class="mod" id="mod23" >
      <div class="content" >
       <div class="hd" >
         <div class="title">Hello1</div>
           <ul class="list"></ul>
           <ul class="buttons">
             <li class="help"></li>
             <li class="show" ></li>
             <li class="close"></li>
           </ul>
       </div>
      </div>
     </div>
    <div class="mod" id="mod27" >
      <div class="content" >
       <div class="hd" >
         <div class="title">Hello2</div>
           <ul class="list"></ul>
           <ul class="buttons">
             <li class="help"></li>
             <li class="show" ></li>
             <li class="close"></li>
           </ul>
       </div>
      </div>
     </div>

Here is the code I have tried to e up with which is not working

$('div').each(function(index) {
if($(this).hasClass('title').text('Hello1')){
    alert('found');
    }
});

I want to iterate through the div structure.Actually, what I want is if I have different div structures with same class name e.g. mod and I want to check the internal div whose class name is title. The only difference between them are the contents of the div with class name title have text as hello1 and for other its hello2.

Here is the Structure

<div class="mod" id="mod23" >
      <div class="content" >
       <div class="hd" >
         <div class="title">Hello1</div>
           <ul class="list"></ul>
           <ul class="buttons">
             <li class="help"></li>
             <li class="show" ></li>
             <li class="close"></li>
           </ul>
       </div>
      </div>
     </div>
    <div class="mod" id="mod27" >
      <div class="content" >
       <div class="hd" >
         <div class="title">Hello2</div>
           <ul class="list"></ul>
           <ul class="buttons">
             <li class="help"></li>
             <li class="show" ></li>
             <li class="close"></li>
           </ul>
       </div>
      </div>
     </div>

Here is the code I have tried to e up with which is not working

$('div').each(function(index) {
if($(this).hasClass('title').text('Hello1')){
    alert('found');
    }
});

• javascript
• jquery
• html

Share Improve this question Follow asked Jul 6, 2012 at 17:41 JudyJudy 1,54399 gold badges2727 silver badges4141 bronze badges 1

• 1 you can give more than one class name to an element, just seperate them by a space – Ibu Commented Jul 6, 2012 at 17:45

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

you can use contains selector:

$('div.title:contains("Hello")').each(function(index) {
    alert('found');
});

http://jsbin./atayeb/2/

var result = $('div.title').filter(function() {
    return $(this).text() === "Hello1";
});

// Do something with result

Or you can look at the contains-selector but this does match everything witch matches your query.

var result = $('div.title:contains(Hello1)')

---

To check if you match anything simply:

if ( result.length ) {
    alert("found");
}

$('div').each(function(index) {
if($(this).find('.title').first().text() == 'Hello1'){
    alert('found');
    }
});

there might be cooler ways though

Try this instead:

<script>
$('div').each(function(index) {
if($(this).hasClass('title') && $(this).text() == 'Hello1'){
    alert('found');
    }
});
</script>

Good luck!

You can get to the div you are interested in more directly by using a CSS selector:

$('.mod .title').each(function(i, e) {  
    if($(e).text() == 'Hello1') {
        alert('found');
    }
});?

 $('div').each(function (index) {
        if ($(".title")) {
            if ($(this).text('Hello1')) {
                alert('found');
            }
        }
    });

本文标签： javascriptAccessing the nested div with same class names but different test using jqueryStack Overflow