在相同(或不相同)级别上按类选择最近的元素

How to select the nearest element with a specific class that is or may not be on the same level as the clickable element?

如何选择与可单击元素在同一级别上的特定类的最近元素?

For example, lets says that this is the output:

例如，假设这是输出:

<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>

I want when I click on p.click that it will find the nearest p.change-on-click element.

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

Just like this, but unfortunately I can't change the HTML.

就像这样，但不幸的是我不能改变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

这是第二种情况的小提琴。

4 个解决方案

#1

This is going to require a custom approach since the jQuery API does not support that type of searching. Basically, just iterate through the parent nodes until you find the click-on-change element.

这将需要一种自定义方法，因为jQuery API不支持这种类型的搜索。基本上，只需遍历父节点，直到找到单击-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>

#2

You can do it this way:

你可以这样做:

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

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

#3

Is this what you're looking for? ( Locate the target element via a while loop )

这就是你要找的吗?(通过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>

OR (Using a jQuery plugin)

或者(使用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>

UPDATE

更新

The following version should work for cases where the target element is before or after the clicked element:

以下版本适用于目标元素在单击元素之前或之后的情况:

$('.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

演示

#4

You can do this with jQuery without making extra functions and stuff like this...

您可以使用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>

#1