时间戳

首页 > 解决方案 > 从 ajax 内容中查找 div 类名

jquery - 从 ajax 内容中查找 div 类名

问题描述

我有以下由服务器端脚本生成的 ajax 响应：

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

现在我想获取div class name包含item-title类名内的单词。所以 div 类名中的数字不应该是相关的（在这种情况下 item-title3 的 3 不应该是相关的）。

在此示例中，我想查找并存储item-title3在我的变量 className 中。

我用 filter 方法尝试过，但结果是 [object Object]：

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

完整代码：

<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>

标签： jqueryajax

解决方案

要选择其类包含的元素，item-title您可以使用

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

要获得您需要的类名，即使您可以使用同一元素的其他类.split()，.indexOf

请参阅下一个示例

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>

我向item-testClassdiv 元素添加了类以检查代码是否有效，即使同一元素还有其他类..您可以将其删除

如果您有多个元素item-title并且需要让所有元素都使用.each

var item_title = $('div[class*="item-title"]'); // if its array of elements
//console.log(item_title);


item_title.each(function(){
  var ClassName = '';
  var classes = $(this).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 3</div>
<div class="item-level">120</div>
<div class="item-binding">40</div>
<div class="item-type">Feet</div>
<div class="item-testClass  item-title50">Testname 50</div>

推荐阅读