find string in block using jquery

Question

I want to search the word 'Digital Commerce' in the block of div which is generated in drupal.I have tried to search to find the word and get the class name of the div.If the word 'Digital Commerce' is in class 'views-row-2' I want to get the class name 'views-row views-row-2 views-row-even' using jquery.The below html code is generated in drupal. I want to search the word in both list item div.

$('#tabsSlider .carousel-inner li:contains("Digital Commerce")').each(function() {
  $(this).find('div').each(function() {
    $(this).find('.tabSection a').css('color', 'red !important');
    var className = $(this).find('.tabSection a').attr('class');
    console.log(className);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel slide" id="tabsSlider">
  <div class="carousel-inner">
    <li class="item">
      <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/">
            <div class="tabTitle">
              <div class="field-content">Consulting</div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-2 views-row-even">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/digital-commerce">
            <div class="tabTitle">
              <div class="field-content">Digital Commerce</div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-3 views-row-odd">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/customer-portals">
            <div class="tabTitle">
              <div class="field-content">Customer Portals</div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-4 views-row-even">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/internal-collaboration-platform" class="">
            <div class="tabTitle">
              <div class="field-content">Internal Collaboration Platform </div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-5 views-row-odd">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/business-process-automation">
            <div class="tabTitle">
              <div class="field-content">Business Process Automation</div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li class="item"> //same as first list</li>
  </div>
  <a class="left carousel-control" href="#tabsSlider" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a><a class="right carousel-control" href="#tabsSlider" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

guradio · Accepted Answer · 2017-06-02 09:03:45Z

1

$('#tabsSlider .carousel-inner li div:contains("Digital Commerce")').each(function() {
    $(this).closest('.tabSection a').css('color', 'red');
    var className = $(this).closest('.tabSection').parent().attr('class');
    console.log(className);
});


$('#tabsSlider a').filter(function() {
    var qwe = $(this).attr("href");
    
    return qwe.indexOf("internal-collaboration-platform") > -1
}).css('color', 'green');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel slide" id="tabsSlider">
  <div class="carousel-inner">
    <li class="item">
      <div class="views-row views-row-1 views-row-odd views-row-first">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/">
            <div class="tabTitle">
              <div class="field-content">Consulting</div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-2 views-row-even">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/digital-commerce">
            <div class="tabTitle">
              <div class="field-content">Digital Commerce</div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-3 views-row-odd">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/customer-portals">
            <div class="tabTitle">
              <div class="field-content">Customer Portals</div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-4 views-row-even">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/internal-collaboration-platform" class="">
            <div class="tabTitle">
              <div class="field-content">Internal Collaboration Platform </div>
            </div>
          </a>
        </div>
      </div>
      <div class="views-row views-row-5 views-row-odd">
        <div class="tabSection col-md-2">
          <a href="test/portals-content-management/business-process-automation">
            <div class="tabTitle">
              <div class="field-content">Business Process Automation</div>
            </div>
          </a>
        </div>
      </div>
    </li>
    <li class="item"> //same as first list</li>
  </div>
  <a class="left carousel-control" href="#tabsSlider" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a><a class="right carousel-control" href="#tabsSlider" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

Use div:contains() selector to select the div that contains that text
Use .closest() to get the anchor and the div that is related to that div

edited Jun 2, 2017 at 9:03

answered Jun 2, 2017 at 7:27

guradio

15.6k4 gold badges39 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3386779 Over a year ago

I have urlParameter='Digital Commerce'; Shall I use $('#tabsSlider .carousel-inner li div:contains("'+urlParameter[3]+'")')

guradio Over a year ago

@user3386779 urlParameter only

user3386779 Over a year ago

the above snippet is not working for the work 'internal-collaboration-platform' in fourth view href

user3386779 Over a year ago

Let us continue this discussion in chat.

Collectives™ on Stack Overflow

find string in block using jquery

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related