在相同（或不同）级别上按类选择最近的元素答案

【问题标题】：Select nearest element by class on the same(or not) level在相同（或不同）级别上按类选择最近的元素
【发布时间】：2014-12-10 00:38:59
【问题描述】：

如何选择具有特定class或的最近元素可能与可点击元素不在同一级别？

例如，让我们说这是输出：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div>
        <p class="change-on-click">A</p>
        <p class="click">Click on this will change A</p>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">B</p>
        <div>
            <p class="click">Click on this will change B</p>
        </div>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">C</p>
        <div>
            <div>
                <p class="click">Click on this will change C</p>
            </div>
        </div>
    </div>
</div>

<div>
    <div>
        <div>
            <div>
                <p class="click">Click on this will change D</p>
            </div>
            <p class="change-on-click">D</p>
        </div>
    </div>
</div>

<div>
    <div>
        <div>
            <div>
                <p class="click">Click on this will change E</p>
            </div>
        </div>
    </div>
    <p class="change-on-click">E</p>
</div>

我希望当我点击p.click 时，它会找到最近的p.change-on-click 元素。

就这样，可惜我不能更改HTML。

$('.click').on('click', function(){
    $(this).closest('.parent').find('.change-on-click').css('color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="parent">
    <div>
        <p class="change-on-click">A</p>
        <p class="click">Click on this will change A</p>
    </div>
</div>

<div class="parent">
    <div>
        <p class="change-on-click">B</p>
        <div>
            <p class="click">Click on this will change B</p>
        </div>
    </div>
</div>

<div class="parent">
    <div>
        <p class="change-on-click">C</p>
        <div>
            <div>
                <p class="click">Click on this will change C</p>
            </div>
        </div>
    </div>
</div>

<div class="parent">
    <div>
        <div>
            <div>
                <p class="click">Click on this will change D</p>
            </div>
            <p class="change-on-click">D</p>
        </div>
    </div>
</div>

<div class="parent">
    <div>
        <div>
            <div>
                <p class="click">Click on this will change E</p>
            </div>
        </div>
    </div>
    <p class="change-on-click">E</p>
</div>

Here's a fiddle with the second situation

【问题讨论】：

我不知道除了父母递归检查之外还能做什么......
@Verhaeren the fiddle is a "通常，我会这样做，但我无法更改 HTML"。

标签： javascript jquery html jquery-selectors

【解决方案1】：

这需要自定义方法，因为 jQuery API 不支持这种类型的搜索。基本上，只需遍历父节点，直到找到 click-on-change 元素。

$('.click').click(function(){
  var node = this;
  while(node != document.body){
   var target = $(node).find('.change-on-click')
   if( target.length == 0 ){
    node = node.parentNode;
   }else{
    target.css('color','red');
    return;
   }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div>
        <p class="change-on-click">A</p>
        <p class="click">Click on this will change A</p>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">B</p>
        <div>
            <p class="click">Click on this will change B</p>
        </div>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">C</p>
        <div>
            <div>
                <p class="click">Click on this will change C</p>
            </div>
        </div>
    </div>
</div>

【讨论】：

就是这样！它就像一个魅力。我从没想过 JQuery 没有选择器来应对这种情况。

【解决方案2】：

你可以这样做：

$('p.click').each(function(i){
    $(this).on("click", function(){$('.change-on-click').eq(i).css('color', 'red');});
});

http://jsfiddle.net/4ofajqxa/1/

【讨论】：

【解决方案3】：

这就是你要找的吗？ (通过while循环定位目标元素)

$('.click').on('click', function() {
    var coc = $(this);
    while( !coc.prev().is( '.change-on-click' ) ) {
        coc = coc.parent();
    }
    coc.prev().css('color','red');
});

$('.click').on('click', function() {
    var coc = $(this);
    while( !coc.prev().is( '.change-on-click' ) ) {
        coc = coc.parent();
    }
    coc.prev().css('color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div>
        <p class="change-on-click">A</p>
        <p class="click">Click on this will change A</p>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">B</p>
        <div>
            <p class="click">Click on this will change B</p>
        </div>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">C</p>
        <div>
            <div>
                <p class="click">Click on this will change C</p>
            </div>
        </div>
    </div>
</div>

或（使用 jQuery 插件）

$('p.click').on('click', function(){
    $(this).changeOnClick();
});

$.fn.changeOnClick = function() {
  return this.each(function() {
    var near = $(this);
    while( !near.prev().is('.change-on-click') ) {
      near = near.parent();
    }
    near.prev().css('color','red');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div>
        <p class="change-on-click">A</p>
        <p class="click">Click on this will change A</p>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">B</p>
        <div>
            <p class="click">Click on this will change B</p>
        </div>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">C</p>
        <div>
            <div>
                <p class="click">Click on this will change C</p>
            </div>
        </div>
    </div>
</div>

更新

以下版本应该适用于目标元素在被点击元素之前或之后的情况：

$('.click').on('click', function() {
    var coc = $(this);
    while( !coc.prev().is( '.change-on-click' ) && !coc.next().is( '.change-on-click' ) ) {
        coc = coc.parent();
    }
    coc.prev().add( coc.next() ).filter( '.change-on-click' ).css('color','red');
});

DEMO

【讨论】：

我喜欢这个插件！但是，如果.change-on-click 元素在.click 元素之后（试图发布小提琴但JS 破坏它），这将不起作用。
很高兴你在这里找到了好东西 :) 谢谢！只是为了帮助我为后代重新编写代码，您是否有.change-on-click 元素位于.click 元素之后的示例？
当然，here you go - 我添加了另外两个案例。
太棒了！谢谢@Vucko。我已经更新了我的答案并包含了一个演示。好问题！

【解决方案4】：

你可以用 jQuery 做到这一点，而不需要额外的函数和类似的东西......

$('.click').on('click', function(){
    $('.change-on-click', $(this).parents('div')).css('color', 'red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    <div>
        <p class="change-on-click">A</p>
        <p class="click">Click on this will change A</p>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">B</p>
        <div>
            <p class="click">Click on this will change B</p>
        </div>
    </div>
</div>

<div>
    <div>
        <p class="change-on-click">C</p>
        <div>
            <div>
                <p class="click">Click on this will change C</p>
            </div>
        </div>
    </div>
</div>

<div>
    <div>
        <div>
            <div>
                <p class="click">Click on this will change D</p>
            </div>
            <p class="change-on-click">D</p>
        </div>
    </div>
</div>

<div>
    <div>
        <div>
            <div>
                <p class="click">Click on this will change E</p>
            </div>
        </div>
    </div>
    <p class="change-on-click">E</p>
</div>

【讨论】：