Question

我有两个与TreeMenuChild具有相同类名的div，但标识基于它的data-attr值

<div class="ui-collapsible-content ui-body-a" aria-hidden="false">
        <div class="TreeMenuChild" data-attr="one" data-role="collapsible" data-theme="a" data-content-theme="a">
             <h3><a href="#">200 ML</a></h3>

            <div class="ui-collapsible-content ui-body-a" aria-hidden="false"></div>
        </div>
        <div class="TreeMenuChild" data-attr="two" data-role="collapsible" data-theme="a" data-content-theme="a">
             <h3><a href="#">300 Milli liters</a></h3>

            <div class="ui-collapsible-content ui-body-a ui-collapsible-content-collapsed" aria-hidden="true"></div>
        </div>
    </div>

我有两个div，如下所示

var firstdivcontent = '<div id="footer">Add this to First </div>';
var seconddivcontent = '<div id="footer">Add this to Second </div>';

我正在尝试添加

firstdivcontent到TreeMenuChild，它有data-attr =“one”和 seconddivcontent到TreeMenuChild，它有data-attr =“two”

我是这样尝试的，但是请你告诉我为什么div被添加到TreeMenuChild的上述div中

$(document).on("click", "#firstbtn", function () {
   if ($('#datacontainer').find('.TreeMenuChild').attr('data-attr') == 'one') {
        $(".TreeMenuChild .ui-collapsible-content").append(firstdivcontent).trigger("create");
    }
});


$(document).on("click", "#secondbtnbtn", function () {
});

http://jsfiddle.net/u8fjv78s/7/

你能告诉我怎么做吗??

Answer 1

为什么不使用正确的选择器.TreeMenuChild[data-attr=one]

来保持简单

$(document).on("click", "#firstbtn", function () {

        $(".TreeMenuChild[data-attr=one]").append(firstdivcontent).trigger("create");

});

Answer 2

在jQuery中检索元素的dataset属性，您需要在dataset名称而不是attr函数上使用data。

$(document).on("click", "#firstbtn", function () {

   if ($('#datacontainer').find('.TreeMenuChild').data('attr') == 'one') {
        // do whatever
    }
});

Answer 3

要根据属性选择任何html元素，可以使用语法[attribute ='value']。

对于像这样的div：

<div data-prop="one"></div>

你可以写：

$("div[data-prop='one']").html("html");

你会在div的内容中看到html。

小提琴：http://jsfiddle.net/x5f5x1nx/

如何根据div的data-attr值向div添加内容

3 个答案: