.find()-result 的根答案

【问题标题】：Root of .find()-result.find()-result 的根
【发布时间】：2015-03-10 12:35:09
【问题描述】：

我有这样一个 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-Attribute-value 来选择第一个跨度而不更改 javascript？

我以前做过什么？

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

两者都解析为0的长度。

FIDDLE

顺便说一句：我可以拥有额外的插件或额外的库。

【问题讨论】：

.find 只能用于查找所选元素的后代。因此，根据您的代码，没有选择器可以放入该属性中以找到第一个跨度。
并使用额外的插件？
你不需要另一个插件，你只需要使用不同的起始元素（或没有起始元素）
@KevinB 正如我所写，我只能更改属性或添加更多 javascript，而不是更改现有的 javascript。
"不更改现有的 javascript" 这没有意义。添加更多的 javascript 将改变现有的 javascript。请澄清。

标签： jquery jquery-ui jquery-selectors

【解决方案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);

【讨论】：

您的解决方案效果很好，不幸的是我无法更改 javascript。但是你给了我一个好方法：覆盖find-方法。只要 jquery 不更改 jQuery.fn 的插件基础设施，这应该可以工作。我认为如果他们更改jQuery.fn 的官方插件基础设施，他们就会自责。你怎么看？

【解决方案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>

【讨论】：