Question

我有一个div，它有一个名为'data-prototype'的属性。那个属性'data-prototype'包含一些html。嵌套在html中的是我想要提取的选择标记。我知道如何使用jquery获取整个属性内容，但不知道如何获取特定标记（在我的情况下为select标记）。先感谢您。干杯。马克

JsFiddle：http://jsfiddle.net/gpsw3/

我的HTML：

<div id="some-div" data-prototype="<div><span>something</span><select><option>opt1</option><option>opt2</option></select></div>"></div>

<a id="btn">click</a>

我的Jquery：

$(document).on({
            click: function() { 
                $container = $('#some-div');
                alert($container.attr('data-prototype'));
            }
}, '#btn');

Answer 1

您可以根据data-prototype的内容创建DOM元素，然后找到给定的元素。

var $container = $('#some-div');
var $prototype = $("<div/>").append($container.attr("data-prototype"));
var $select    = $prototype.find("select");

或者，您可以使用.data()代替.attr()来访问data-*属性。

See it here.

澄清$("<div/>").append(...)。 .find()函数适用于后代，因此您需要包装内容以便能够选择data-prototype属性中的最顶层（根）元素。

Answer 2

试试这个：http://jsfiddle.net/gpsw3/1/

$(document).on({
        click: function() { 
            $container = $('#some-div');
            var a = $container.attr('data-prototype');
    var b = a.substr(0, a.indexOf('</div>'));
    var c = b.substr(b.indexOf('<select>'));
    alert(c);
        }
    }, '#btn');

我认为没有其他方法可以做到这一点（不确定），但这样你就可以提取你正在寻找的东西。

Answer 3

将您的数据属性内容放在DOM选择器中，然后将其作为目标

工作示例： http://jsfiddle.net/gpsw3/3/

$(document).on({
    click: function() {
        $container = $('#some-div');
        $nestedHTML = $("<div/>").append($container.attr('data-prototype'));
        $select = $nestedHTML.find('select');
        console.log( $select);
    }
}, '#btn');

Jquery - 如何选择包含html的div标签属性的特定标签？

3 个答案: