Question

我知道这里有很多关于这个的帖子，但我还没有发现任何有用的信息。我想因为我的按钮嵌套的深度与我试图影响的div的位置有关。

大部分是动态生成的，因此我无法定位ID，但我可以定位类。

我尝试了很多方法。包括：

$('div.hold:first').addClass('skinSelected');

AND

$(this).parent.parent.parent.prev('.hold').addClass('skinSelected')

AND

$(this).parent.prev('.hold').addClass('skinSelected')

这是第一个div的工作，但是我有很多div和＃34; hold＆＃34;

这是我的HTML：

<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
    <div>
        <span>....</span>
        <div>....</div>
        <div>
            <h3>...</h3>
            <p>...</p>
            <a href="javascript:void(0)" class="btn btn-primary" onclick="passSkinID()">select</a>
        </div>  
    </div>
</div>
</li>

这是我的javascript：

<script type="text/javascript">
function passSkinID() {
    $('div.skinSelected').removeClass('skinSelected');
    $(this).prevAll('.hold:first').addClass('skinSelected')
}
</script>

这是我的css

<style>
    .skinSelected {
    background-size:cover; 
    width:100%; 
    background:#2d67a3; 
    color:#FFFFFF;
    display:block !important;
}
</style>

提前感谢任何见解！

Answer 1

因为事件是在<li>标记的子项上触发的，该标记还包含您要操作的元素，所以您必须使用closest()将DOM移至该父项，然后找到所有子项有必要的课程：

$(this).closest('li').find('.hold').addClass('skinSelected')

只有在<li>和您没有其他<li>的链接之间，以及您不需要的其他.hold元素时，此功能才有效39; t想要将类添加到此特定<li>树之外。我想你的DOM结构是这样的：

<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
    <div>
        ...
        <div>
            ...
            <a href="javascript:void(0)" class="btn btn-primary" onclick="passSkinID()">select</a>
        </div>  
    </div>
</div>
</li>   

<li>
<a>...</a>
<div style="display:none" class"hold">current selection</div>
<div>
    <div>
        ...
        <div>
            ...
            <a href="javascript:void(0)" class="btn btn-primary" onclick="passSkinID()">select</a>
        </div>  
    </div>
</div>
</li>   
...

Answer 2

对于第一个你需要和你的div元素相等的类＆＃34; holden＃34;

你可以像我在这个jsBin http://jsbin.com/lujekojami/1/edit?html,css,js,output

中那样做

我希望它有所帮助：）

Answer 3

首先，您不能使用$(this)因为它引用了jQuery的窗口对象。您应该在单击时传递this，然后将其包装到jquery对象中。

HTML：

<a href="javascript:void(0)" class="btn btn-primary" onclick="passSkinID(this)">select</a>

脚本：

function passSkinID(el) {
    $('div.skinSelected').removeClass('skinSelected');
    // use passed element instead of $(this):
    $(el).closest('li').find('.hold').addClass('skinSelected');
}

DEMO

然而，我会这样做：

<a href="#" class="my-btn btn btn-primary" >select</a>

脚本：

$('.my-btn').click(function(e) {
    e.preventDefault();
    $('div.skinSelected').removeClass('skinSelected');
    $(this).closest('li').find('.hold').addClass('skinSelected');
});

DEMO

从onclick事件中选择一个带有类名的前一个div并添加到它的类中

3 个答案: