0

「Hello World」を .foo に追加しようとしていますが、コンテナー (製品) に .foo2 も含まれている場合のみです。次のコードは途中までですが、.foo2 を持つ特定の製品コンテナーだけでなく、.foo のすべてのインスタンスに追加テキストを追加します。

<!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");

フィルタは、各要素で実行される関数です。trueを返す場合、要素は保持されます。falseが返された場合、要素は削除されます。

于 2012-10-24T20:09:24.240 に答える
0

ここで、コードjsfiddle.net/X8uUH/は、必要に応じて 2 番目の div に「hello world」のみを追加します

$(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 に答える