CODEWITHSUNDEEP
javascriptjquery
hkguile
hkguile

Reputation: 4369

Get the text of div of div

Here is the code up to now. i want to access the value 1 of the <div class="field-item even">1</div>, and then if the value is 1 add a class, if the value is 0, add a another class. My code only access the first field-collection-container, i can't figure it out the problems.

$(document).ready(function () {  
        jQuery.each($('.field-collection-container'), function (i, obj) {
            alert($(this).find('.field-items .content .field-item').text());
        })

});

the html

<div class="container">
<div class="field-collection-container clearfix">
    <div class="field field-name-field-interview-feeling field-type-field-collection field-label-above">
    <div class="field-label">TEXT</div>
        <div class="field-items">
        <div class="field-item even">
            <div class="field-collection-view clearfix view-mode-full field-collection-view-final">
                <div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
                  <div class="content">
                    <div class="field field-name-field-19 field-type-list-boolean field-label-above">
                        <div class="field-label">TEXT</div>
                        <div class="field-items">
                            <div class="field-item even">1</div>
                        </div>
                    </div>
                    <div class="field field-name-field-no-people field-type-list-boolean field-label-above">
                        <div class="field-label">TEXT</div>
                        <div class="field-items"><div class="field-item even">0</div></div>
                    </div>
                    <div class="field field-name-field-untrust field-type-list-boolean field-label-above">
                        <div class="field-label">TEXT</div>
                        <div class="field-items"><div class="field-item even">0</div></div>
                    </div>
                    <div class="field field-name-field-waste-money field-type-list-boolean field-label-above">
                        <div class="field-label">TEXT</div>
                        <div class="field-items"><div class="field-item even">0</div></div>
                    </div>  
                  </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>
<div class="field-collection-container clearfix">
.....
</div>
<div class="field-collection-container clearfix">
.....
</div>

Upvotes: 0

Views: 230

Answers (7)

Tomalak
Tomalak

Reputation: 338406

$('.field-collection-container .field-items .field-item').addClass(function () {
    return $(this).text() === "1" ? "one-class" : "another-class";
});

Note that you do not need .each() at all.

You could use $.trim($(this).text()) if you expect spaces to be present.

Upvotes: 2

Xotic750
Xotic750

Reputation: 23502

Here is an example of a javascript solution

var fieldItems = document.querySelectorAll(".field-collection-container .field-item");

Array.prototype.forEach.call(fieldItems, function (fieldItem) {
    var text = fieldItem.textContent.trim();

    if (text === "0") {
        fieldItem.className += " Zero";
    } else if (text === "1") {
        fieldItem.className += " One";
    }
});

On jsfiddle

Upvotes: 0

Thomas Junk
Thomas Junk

Reputation: 5676

If you really only want the alternating fielditem divs in different classes you could try

$.each($(".field-item").find(".even"), function(i,o){ if(o.textContent==="1") $(o).addClass("some"); if(o.textContent==="0") $(o).addClass("other");)

Which is short and fast.

Upvotes: 0

Prashant Kankhara
Prashant Kankhara

Reputation: 1588

Please find the below code and i hope it solves your problem

$("div.content").find("div.field-item").each(function () {
                if ($(this).html() == 1)
                    $(this).addClass("evenDivClass");
                else if ($(this).html() == 0)
                    $(this).addClass("oddDivClass");
            });

Upvotes: 0

vijay
vijay

Reputation: 1353

Check this sample on jsFiddle

http://jsfiddle.net/vijaypatel/Q2GHV/

$(function () {
    $('.field-collection-container').each(function (index, obj) {
        $(this).find('.field-items .content .field-item').each(function (index, obj) {
            alert($(this).text());
            if ($(this).text() == '1') {
                $(this).prop('class','One');
            } else {
                $(this).prop('class','Zero');
            }
        });
    });
});

Above code is woroking fine with multiple "field-collection-container" and also modify odd even elements

Upvotes: 0

PraJen
PraJen

Reputation: 606

 <div class="field-items">
    <div class="field-item even">
        <div class="field-collection-view clearfix view-mode-full field-collection-view-final">
            <div class="entity entity-field-collection-item field-collection-item-field-interview-feeling clearfix" about="/dtesthkinterview/field-collection/field-interview-feeling/4" typeof="">
              <div class="content">
                <div class="field field-name-field-19 field-type-list-boolean field-label-above">
                    <div class="field-label">TEXT</div>
                    <div class="field-items">
                        <div ***id="id1"*** class="field-item even">1</div>
                    </div>

Instead of calling like this

  $(document).ready(function () {  
    jQuery.each($('.field-collection-container'), function (i, obj) {
        alert($(this).find('.field-items .content .field-item').text());
    })

});

u can use id for a div and call like this

    $(document).ready(function () {  
    {  
       var t=$("#id").text();
       alert(t);
       if(t==1)
          {
            $("#id1").addClass(".classname");
          }
       else
         {
         if(t==0)
          {
            $("#id1").addClass(".anotherclassname");
          }
         }

     })

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94499

jQuery.each($('.field-collection-container .field-items .content .field-item'), function (i, obj) {
    if($(this).text() == "1"){
       $(this).addClass("someclass");
    }else if($(this).text() == "0"){
        $(this).addClass("anotherClass");
    }
});

Working Example http://jsfiddle.net/P9meu/

Upvotes: 1

Related Questions