次のマークアップを検討してください。
<div class="click">click</div>
<div class="container">
<div>
<div data-attr="color">blue</div>
<div data-attr="color">red</div><!-- this is the only n-th child div to be red -->
<div data-attr="color">red</div>
<div data-attr="color">red</div>
</div>
</div>
<div class="click">click</div>
<div class="container">
<div>
<div data-attr="color">blue</div>
<div data-attr="color">red</div><!-- this is the only n-th child div to be red -->
<div data-attr="color">red</div>
<div data-attr="color">red</div>
</div>
</div>
そしてこのスクリプト：
<script>
$(document).ready(function () {
$('.click').click(function () {
$('.container div').each(function (i) {
if ($(this).attr('data-attr') == "color" && $(this).html() == "red" && $(this).prevUntil('.container').filter(function (i) {
return $(this).attr('data-attr') == "color" && $(this).html() == "red"
}).length == 0) {
$(this).css('color', 'red');
}
});
});
});
</script>
つまり、一致する要素が最初の場合にのみ赤くしたいのです。私の問題は、別の構造のスクリプトを使用するように制限されているため、スクリプトThisIsFirstInsideItsClosestParentContainer内の一部のみif()を書き換える必要があり、このスクリプトの残りの部分はそのままにしておく必要があることです。
<script>
$(document).ready(function () {
$('.click').click(function () {
$('div').filter(function (i) {
return $(this).attr('data-attr') == "color" && $(this).html() == "red"
}).each(function (i) {
if (ThisIsFirstInsideItsClosestParentContainer) {
$(this).css('color', 'red');
}
});
});
});
</script>
その上、私は私の場合 prevUntil() の使用を強く嫌いますが、別の方法を見つけていません。では、ThisIsFirstInsideItsClosestParentContainerprevUntil() を使用しないと、どのように見えるでしょうか?
EDIT
なぜこれがうまくいかないのか教えてください
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.click').click(function () {
$('.container [data-attr]').filter(function (i) {
return $(this).attr('data-attr') == "color" && $(this).html() == "red"
}).each(function (i) {
if ($(this).index() == 0) {
$(this).css('color', 'red');
}
});
});
});
</script>
</head>
<body>
<div class="click">click</div>
<div class="container">
<div>
<div data-attr="color">blue</div>
<div data-attr="color">red</div><!-- this is the only n-th child div to be red -->
<div data-attr="color">red</div>
<div data-attr="color">red</div>
</div>
</div>
<div class="click">click</div>
<div class="container">
<div>
<div data-attr="color">blue</div>
<div data-attr="color">red</div><!-- this is the only n-th child div to be red -->
<div data-attr="color">red</div>
<div data-attr="color">red</div>
</div>
</div>
</body>
</html>