Question

以下是我的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>

下面是javascript

$(".checkclass").click(function() {
    var tes = $(this).closest("div").attr("test");
    alert(tes);
});

我正在尝试访问div.h3.i ...但我无法访问div本身：/。请检查这个小提琴http://jsfiddle.net/9cQmJ/。我哪里错了？

Answer 1

那是因为加载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>

所以你必须使用另一种选择器，尝试使用属性选择器

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

DEMO

Answer 2

你需要找到带有div属性的test元素（如果你想要div元素的test属性）

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

演示：Fiddle

h3元素的测试属性

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

演示：Fiddle

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

Answer 3

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

看到这个小提琴：http://jsfiddle.net/9cQmJ/5/

$(".checkclass").click(function () {
    var test = $(this).closest("div").attr("test");
    console.log($(this).closest('div')); // div surrounding checkbox
    console.log($(this).closest('div[test]').attr('test')); // now it gets to the div you want
});

Answer 4

看起来框架将复选框包装在div元素中，最后你会看到错误的div。一种解决方法是找到包含h3元素的最近div;并抓住属性：

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

Answer 5

试试这个，

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

Demo

Answer 6

已创建另一个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.
});

最近的父母不工作

6 个答案: