Question

我有这样一个DOM

<html>
  you clicked <span>0</span> times

  <div class="button" countSelect=">span">
    you clicked <span>0</span> times.
  </div>
</html>

这是我的javascript：

function increase(i,e){
  var $e = jQuery(e);
  $e.text($e.text() * 1 + 1);
}
function handle(){
  var selectText = $(this).attr('countSelect');
  $(this).find(selectText).each(increase);
}
$(function(){
  $('.button').click(handle);
});

我需要countSelect - 属性值来选择第一个跨度而不更改javascript？

我以前做过什么？

我尝试使用*:root > span。
我尝试使用*:parent:parent > span。

两者都解析为0的长度。

FIDDLE

BTW：我可以使用额外的插件或额外的图书馆。

Answer 1

这与我遇到的另一个问题有关，所以希望这会对你有所帮助。只要您可以更改jQuery代码的一行，就可以支持上下DOM选择器。虽然可以用此代码替换find，但不推荐（甚至不是一点）：）

我创建了一个名为findThis的小型jQuery扩展方法，它允许您使用:this伪选择器。在运行时，它将临时ID放在“当前”元素上，并用选择器中的该id替换:this。然后它将选择器应用于document。这允许像“div:has(:this)”这样的酷选择器有效地允许您在DOM上下搜索。

JSFiddle： http://jsfiddle.net/TrueBlueAussie/08zm3vLu/2/

您需要将HTML更改为：

<button class="button" countSelect=":this > span">you clicked <span>0</span> times.</button>
<button class="button" countSelect="span:first()">you clicked <span>0</span> times.</button>
<button class="button" countSelect="span:first()">you clicked <span>0</span> times.</button>

你的一行代码：

$(this).findThis(selectText).each(increase);

Answer 2

这可以在不更改现有HTML或JavaScript的情况下运行：

    function increase(i,e){
      var $e = jQuery(e);
      $e.text($e.text() * 1 + 1);
    }
    function handle(){
      var selectText = $(this).attr('countSelect');
      var $k = $(this).find(selectText);
      console.debug($k);
        $k.each(increase);
    }

    $(function(){
      $('.button').click(handle);
    });
    if (!jQuery.fn.findOrig){
      jQuery.fn.findOrig = jQuery.fn.find;
      jQuery.fn.find = function(selector){
        if (selector[0]==='p' && selector.indexOf('parent') === 0) {
            return this.parent().find(selector.slice(6));
        }
        if (selector[0]===':' && selector.indexOf(':root') === 0) {
            return jQuery(document.body).findOrig(selector.slice(5));
        }
        return this.findOrig(selector);
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


you clicked <span>0</span> times
      
<button class="button" countSelect=">span">
  you clicked <span>0</span> times.
</button>

<button class="button" countSelect=":root > span">
  you clicked <span>0</span> times.
</button>

.find（）的根 - 结果

FIDDLE

2 个答案: