Javascript 最近的父母不工作

下面是我的html

<div test="dive" data-role="collapsible">
        <h3 test="h3">morning Snack <i></i></h3>
    <p>seI'm the collapsible content for section 2</p>

   <form>
       <input test="sd" class="checkclass"  name="checkbox-mini-0" id="checkbox-mini-0" data-mini="true" type="checkbox"></input>
    <label for="checkbox-mini-0">Completed This.</label>
   </form>

    </div>

---

我正在尝试访问div.h3。我。。。但我无法访问div本身：/。请检查此小提琴。我错在哪里？

您需要找到具有

test

属性的

div

元素（如果需要div元素的test属性）

演示：

h3元素的测试属性

var tes = $(this).closest("div[test]").find('h3').attr("test");

演示：

---

问题是jQuery Mobile正在添加元素样式所需的其他html结构，这会将其他

div

元素添加到结构中。

这是因为加载DOM后的html如下所示

<div class="ui-collapsible-content" aria-hidden="false">
    <p>seI'm the collapsible content for section 2</p>
    <form>
        <div class="ui-checkbox">
            <input test="sd" class="checkclass" name="checkbox-mini-0" id="checkbox-mini-0"
            data-mini="true" type="checkbox">
            <label for="checkbox-mini-0" data-corners="true" data-shadow="false" data-iconshadow="true"
            data-wrapperels="span" data-icon="checkbox-off" data-theme="c" data-mini="true"
            class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-on ui-btn-hover-c ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Completed This.</span>
                <span
                class="ui-icon ui-icon-shadow ui-icon-checkbox-on">&nbsp;</span>
                    </span>
            </label>
        </div>
    </form>
</div>

---

这里的问题是复选框被div包装，您可以在javascript控制台中看到这一点

看这把小提琴：

---

框架似乎将复选框包装在

div

元素中，您最终看到的是错误的div。一种解决方法是找到包含

h3

元素的最近的div；并获取属性：

$(this).closest("div:has(h3)").find("h3").attr("test");

试试这个

var tes = $(this).closest("div[data-role='collapsible']").attr('test');

---

已创建另一个div来包装您无法看到的复选框，这就是您的代码正在引用的div

$(this).closest('div').find('input').attr('test');

您可以通过添加一个调试器并测试需要什么jQuery选择器来获得您想要的结果来看到这一点

$('.checkclass').click(function () {
  var tes = $(this).closest('div').attr('test');
  debugger;
  // At this point, if your console is open you can inspect tes
  // and see it's not what you want.  Type in $(this).closest('div') 
  // and you'll see it's referencing a div that was created automatically.

  // Try different selectors to find what you need.
});

---

test

属性位于

h3

元素上，而不是

div

。建议不要创建自己的属性。使用

data XXX

attributes.@Barmar:两个都有。哎呀，一定是瞎了。@Barmar:两个都有，我正在测试。。我没有在我的项目中使用任何有效的属性Hey anton。实际上，我正试图访问divs h3 hi..请看这把小提琴。你能帮我一下吗。@毗瑟奴然后你可以使用

.find

来查找h3 var

tes=$（this）.closest（“div[test]”。find（'h3'）.attr（“test”）

你能告诉我加载DOM后在哪里调试html吗？有插件吗？@Vishnu这是因为jQuery移动插件

$(this).closest("div:has(h3)").find("h3").attr("test");

var tes = $(this).closest("div[data-role='collapsible']").attr('test');

$(this).closest('div').find('input').attr('test');

$('.checkclass').click(function () {
  var tes = $(this).closest('div').attr('test');
  debugger;
  // At this point, if your console is open you can inspect tes
  // and see it's not what you want.  Type in $(this).closest('div') 
  // and you'll see it's referencing a div that was created automatically.

  // Try different selectors to find what you need.
});