从链接使用jQuery获取文本

Question

我想从链接<a class="active">...</a>获取文字，该文字是由wordpress中的tab-slider创建的，如图所示。

这是我的jquery

    jQuery(document).ready(function(){
        var text = jQuery('.mk-tab-slider-nav a.active').text();
        alert(text + "");
    });

仅当我使用jQuery('.mk-tab-slider-nav a')时，它才会包含来自所有<a />的所有文字。

但是当我使用'.mk-tab-slider-nav a.active'或'.mk-tab-slider-nav .active'或'.mk-tab-slider-nav:first-child'来检查它是否为空时，它就会变空。

请帮助我，<a />会发生什么，导致我们无法通过.text()

获取文字

Answer 1

您收到一个“空”查询，因为在文档就绪事件之后添加了active类名...当选项卡滑块插件启动时（或者当有人点击选项卡时）添加了该类名。 ..

您需要查看插件及其事件（如果它公开了api集）...

一个肮脏的解决方案可能是在dom上使用手表......

jQuery(document).on(
  "tabSliderActiveText", (event, data) => {
    console.log("TEXT", data);
  }
);

jQuery(document).ready(($) => {
  let selector = '.mk-tab-slider-nav a.active';
  
  let interval = window.setInterval(() => {
    let links = $(selector);
    if(links.length < 1) {
      return;
    }
  
    window.clearInterval(interval);
    $(document).trigger("tabSliderActiveText", {
      text: links.text(),
      item: links
    });
  }, 200);
  
});

.active {
  background: lightseagreen;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mk-tab-slider-nav">
  <a>FOO</a>
</div>
<div class="mk-tab-slider-nav">
  <a>FOO 1</a>
</div>
<div class="mk-tab-slider-nav">
  <a>FOO 2</a>
</div>
<div class="mk-tab-slider-nav">
  <a>FOO 3</a>
</div>
<div class="mk-tab-slider-nav">
  <a>FOO 4</a>
</div>

<script>
  //Mock the WP Plugin
  document.addEventListener("DOMContentLoaded", () => {
      window.setTimeout(() => {
        document
        .querySelector("a")
        .classList
        .add('active')
        ;
      }, 3000);
  });
</script>

Answer 2

＆＃13;

＆＃13;

$(document).ready(function(){
   console.log($('div.mk-tab-slider-nav a.active').text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mk-tab-slider-nav">
  <a href="#" >123</a>
  <a href="#" class="active">456</a>
</div>

＆＃13;

＆＃13;

＆＃13;

工作示例