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

Question

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

例如，假设这是输出:

<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

Answer 1

这将需要一种自定义方法，因为 jQuery API 不支持那种类型的搜索。基本上，只需遍历父节点，直到找到单击更改元素。

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