jquery - Find div class name from ajax content

Question

I have the following ajax response which is generated by a server sided script:

<div class="item-title3">Testname</div>
<div class="item-level">120</div>
<div class="item-binding">40</div>
<div class="item-type">Feet</div>

Now I want to get the div class name which contains the item-title word inside of the class name. So the number in the div class name shouldn′t be relevant (in this case the 3 of item-title3 shouldn′t be relevant).

In this example I want to find and store item-title3 inside my variable className.

I tried it with the filter method, but I get [object Object] as a result:

let className = $content.filter('div.item-title'); 

Complete code:

<script language="javascript">

jQuery(function($) {
  
  $("[tooltip-link]").each(function() {
    let $tooltip = $(this);
    let id = $tooltip.attr("data-id");

    $.ajax({ 
      url: "/datenbank/itemscript.php",
      type: "GET",
      data: {
        "var": id
      }
    }).then(function(data) {

      let $content = $(data);
      let title = $content.siblings('[class^=item-title]').text()

     let className = $content.filter('div.item-title'); 
      
     
      $tooltip.tooltip({
        tooltipClass: "test",
        content: data
      });

       $("<div class="" + ClassName + "">" + title + "</div>").appendTo($tooltip);
    });
  });
    
});
</script>

<a tooltip-link data-id="12555" title=""></a>

question from:https://stackoverflow.com/questions/65902640/find-div-class-name-from-ajax-content

Answer 1

To select the element its class contains item-title you can use

var item_title = $('div[class*="item-title"]'); // select any div element has a class contains `item-title`

To get the class name you need even if there're another classes for the same element you can use .split() , .indexOf

See the next example

var item_title = $('div[class*="item-title"]');
//console.log(item_title);
var ClassName = '';
var classes = item_title.attr('class').split(/(s+)/); // split classes with space
$.each(classes , function(i , v){
  v = v.trim();  // trim() to avoid any left/right white-spaces 
  if(v.indexOf('item-title') > -1){  // if the class contains item-title
    ClassName = v; 
  }
});

console.log(ClassName);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-testClass  item-title3">Testname</div>
<div class="item-level">120</div>
<div class="item-binding">40</div>
<div class="item-type">Feet</div>