相关疑难解决方法(0)

有可能使用jQuery来选择元素的祖先吗？

标记:

<div id="ancestor-1">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>
<div id="ancestor-2">
    <div>
        <a href="#" class="click-me">Click me</a>
    </div>
</div>

脚本:

$(".click-me").click(function(){
    // var ancestorId = ???;
    alert(ancestorId)
});

这些有什么区别？一个比另一个更有效吗？我有点困惑他们为什么都存在.说我有这个标记:

<table>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>...</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
    <tr>
        <td>..</td>
        <td><span class='toggle'>Toggle</span></td>
    </tr>
</table>

从<span>标签我可以使用 两种 $(this).closest('tr');或$(this).parents('tr');访问父/最接近的<tr>标签.

说我有以下标记：

<div class="parent">
    <div class="child">
        <div class="grand-child">

我想从这里.parent开始.grand-child。我可以执行以下两个操作之一：

$('.grand-child').parent().parent();
$('.grand-child').closest('.parent');

总体而言，closest()由于以下原因，感觉是更好的方法：

1. 只有一项功能
2. 与.grand-child和之间的其他div无关.parent

具体来说，由于上述＃2的优势，如果我将标记更改为

<div class="parent">
    <div class="child">
        <div class="nanny">
            <div class="grand-child">

然后，我需要添加一个额外的功能，parent()但closest()仍然可以正常工作。

那么，您为什么会选择parent()还是有原因closest()？

当我单击元素时，我需要获取id第一个最近（最近）li父a元素的 。

<ul>
    <li id="wrong1">
        <ul>
          <li id="p1">
            <a href="" class='btn'></a>
          </li>
          <li id="p2">
            <a href="" class='btn'>Click here!</a>
          </li>
          <li id="p3">
            <a href="" class='btn'></a>
          </li>
        </ul>
    </li>
    <li id="wrong2"></li>
</ul>

当我点击时Click here!，我应该得到li#p2元素。

我用了：

$('a.btn').click(function(e) {
    var GotIt = $(this).parents().find('li').attr('id');
});

但显然它不起作用。我也试过closest()，结果也是一样。

请问如何正确获取元素？

如果选中输入类型复选框,我目前使用以下jQuery代码添加类.但它将类添加到所有元素,即使它们未被选中.

我怎么解决这个问题？

HTML:

<div class="checkbox product-option">
    <label for="addon1">
        <span class="product-option-text">
            <input class="checkbox-row" type="checkbox" name="addons[1]" id="addon1" onclick="prodconfrecalcsummary()">
            <span class="text">Text</span>
        </span>
    </label>
</div>

<div class="checkbox product-option">
    <label for="addon2">
        <span class="product-option-text">
            <input class="checkbox-row" type="checkbox" name="addons[2]" id="addon1" onclick="prodconfrecalcsummary()">
            <span class="text">Text</span>
        </span>
    </label>
</div>

<div class="checkbox product-option">
    <label for="addon3">
        <span class="product-option-text">
            <input class="checkbox-row" type="checkbox" name="addons[3]" id="addon1" onclick="prodconfrecalcsummary()">
            <span class="text">Text</span>
        </span>
    </label>
</div>

jQuery的:

<script>
    jQuery(".checkbox-row").change(function() {
        if($(this).is(':checked')) 
            $('div.checkbox.product-option').addClass("selected"); 
        else 
            $('div.checkbox.product-option').removeClass("selected");
    });
</script>