0

我希望将“Hello World”添加到 .foo，但前提是容器（产品）还包含 .foo2。我已经完成了以下代码的一半，但是它将附加文本添加到 .foo 的所有实例，而不仅仅是也具有 .foo2 的指定产品容器。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Add text to foo if product contains foo2</title>
<style>
.product {
    width: 300px;
    border: 1px #333 solid;
    margin-bottom: 2%;
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>
$(function() {
    if($('.product > .foo2').length > 0){
        $(".foo").append("Hello World");
    }
});
</script>
</head>

<body>
<!-- Div 1 -->
<div class="product">
1
<div class="foo"></div>
</div>

<!-- Div 2 -->
<div class="product">
2
<div class="foo"></div>
<div class="foo2"></div>
</div>

<!-- Div 3 -->
<div class="product">
3
<div class="foo"></div>
</div>

</body>
</html>

谢谢你的帮助。

4

5 回答 5

2

您需要使用以下各项.product单独操作.each()：

$(".product").each(function() {
    var $foo = $(this).children(".foo");

    // using $something.length as a test to determine if it exists
    if ($foo.length && $(this).children(".foo2").length) {
        // so if this product has a .foo and it also has a .foo2,
        // append some text to the .foo
        $foo.append("Hello World");
    }
});
于 2012-10-24T20:03:34.210 回答
1

你可以试试这个

​$(function(){
    $('.product:has("div.foo2")').find('.foo').append('Hello World');
});​

演示。

于 2012-10-24T20:09:14.853 回答
0

最简单的方法是使用选择器定位：

$(".product:has(.foo2) > .foo").append("Hello World");

如果您需要拒绝将 foo2 作为间接子代的产品，这将不起作用，在这种情况下，您可以使用过滤器：

$(".product > .foo")
  .filter(function(){
    return $(this).parent().children(".foo2").length != 0
  }).append("Hello World");

Filter 是一个在每个元素上运行的函数。如果它返回 true，则保留该元素。如果它返回 false，则删除该元素。

于 2012-10-24T20:09:24.240 回答
0

这里的代码jsfiddle.net/X8uUH/只像你想要的那样将“hello world”添加到第二个 div

$(function() {
if($('.product > .foo2').length > 0){
  $(".product:has(.foo2) > .foo").append("Hello World");}});​
于 2012-10-24T20:16:03.493 回答
0

这是一种非常简单的方法，与您最初的方法相似

if($('.product').find(':contains(.foo2)')){
  $(".foo2"). siblings(".foo").append("Hello World");
}

​这里有一个小提琴

于 2012-10-24T20:23:22.550 回答