单击后获取上一个元素文本

Question

结构如下

<div class="class name with spaces_9">
 <div class="class name with spaces_8">
  <div class="class name with spaces_7">
    <div class="class name with spaces_6">
     <span class="class name with spaces_5"> price number </span>
   </div>
  </div>
 </div>
</div>
<div class="class name with spaces_3"> some stuff</div>
<div class="class name with spaces_3">
 <form id="123">
  <div class="class name with spaces_2">
   <div class="class name with spaces_1">
    <a id="content" class="button_class">Button text</a>
   </div>  
  </div> 
 </form>
</div>

我的目的是将具有 class 名称 "class name with spaces_5" 的跨度中的字符串放入某个变量中，但在用户单击 "a" 标记中的按钮之后。这样一个奇怪的目的来自于这样一个事实，即在我网站的实际跨度中，我得到了价格数字。有几个具有此类按钮和价格的块，所有元素都具有相似的 class 名称但价格不同。我需要将此代码放入 GTM 自定义 java 脚本变量或自定义 html 标记中。无论如何，我需要在单击按钮后从一定数量的 div 中的 apper span 获取值。

Answer 1

我们可以使用

获取之前的值

 $(this).prevAll("input[type=text]").val()

现场演示：http://jsfiddle.net/z7hw8/

Answer 2

您可以使用某种 data-widget，这样您就可以在页面中包含多个元素，并使用 js 小部件迭代它们。

类似于：

Html:

<div data-widget="foobar">
  <div class="class name with spaces_6">
   <span class="class name with spaces_5"> price number </span>
  </div> 
  <div class="class name with spaces_1">
    <a id="content" class="button_id">Button text</a>
  </div>  
</div>

js:

$('[data-widget="foobar"]').each(function() {
  var $elm = $(this);
  var $price = $('.class name with spaces_5', $elm);
  var $trigger = $('.button_id', $elm);

  $($trigger).on('click', function() {
    console.log($price); // Or do whatever you wan't with the value
  });
});

单击后获取上一个元素文本

Get previous element text after click

javascript

jquery

google-tag-manager