如何通過點擊jQuery中同一父母的另一個子div來選擇一個子div？

例如我有簡單的html。如何通過點擊jQuery中同一父母的另一個子div來選擇一個子div？

<body> 
    <div class="a"> 
     <div class="child"></div> <!-- div element I click --> 
     <div class="childINeedToSelect"></div> <!-- div element I need to be selected --> 
     <div class="child"></div> 
    </div> 
    <div class="a"> 
     <div class="child"></div> 
     <div class="childINeedToSelect"></div> 
     <div class="child"></div> 
    </div> 
</body>

當我點擊頂部第一child類的div我需要改變，例如，邊境第一childINeedToSelect類的div ONLY。他們有相同的父母 - a class div，但困難的是，有多於a的一個元素。我已經嘗試過：

$(document).ready(function() { 
    var child = $('.child'); 
    child.bind('click', function() { 
     detectElement($(this)); 
    }); 
}); 

var belt; 
function detectElement(arrow) { 
    belt = arrow.parent('.a').children('childINeedToSelect').eq(1); 
    belt.css("background-color", "red"); 
}

正如你看到的，我想送$(this)作爲參數傳遞給detectElement()確定單擊該DIV。但我的目標div背景不會改變，並通過detectElement()功能，歌劇院JavaScript調試器給人當我嘗試使用元素belt後，後，這是檢測我錯誤

Unhandled Error: Cannot convert 'belt.css('marginLeft')' to object

符合

var currentMargin = parseInt(belt.css('marginLeft').toString().replace('px', ''));

但這行代碼完美工作，然後調用detectElement()函數;我究竟做錯了什麼？我應該如何選擇我需要的元素？

來源

2012-10-21 Dmytro

belt = arrow.parent（'。a'）。children（'childINeedToSelect'）。eq（1）;是不是一個有效的selectore，只有一個對象，所以它是.eq（0），但你甚至不需要使用這個選擇器模式的EQ .... – Ohgodwhy

也'子（'childINeedToSelect'）'缺少點前綴以表示類 – charlietfl

我建議：

function detectElement(arrow) { 
    arrow.parent().find('.childINeedToSelect').css('background-color','red'); 
} 

$(document).ready(function(){ 
    $('.child').click(function(){ 
     detectElement($(this)); 
    }); 
});

JS Fiddle demo。

或者你可以使用的方法nextAll()找兄弟childINeedToSelect：

function detectElement(arrow) { 
    arrow.nextAll('.childINeedToSelect').css('background-color','red'); 
}

JS Fiddle demo。

如果您有多個.child和childINeedToSelect元素，你可以在:first選擇傳遞到nextAll()方法：

function detectElement(arrow) { 
    arrow.nextAll('.childINeedToSelect:first').css('background-color','red'); 
}

JS Fiddle demo。

我不確定爲什麼你使用bind()，但你可能被試圖解釋動態添加元素（添加後的事件處理程序綁定到不同的DOM節點截止機會/ jQuery的對象），你也可以使用on()：

$('.a').on('click','.child', function(){ 
    detectElement($(this)); 
});

JS Fiddle demo。

參考文獻：

來源

2012-10-21 08:07:47

非常感謝！ – Dmytro

你真的很受歡迎，我很高興得到了幫助！ =） –

Try this fiddle

$(document).ready(function() { 
    var child = $('.child'); 
    child.bind('click', function() { 
     detectElement($(this)); 
    }); 
}); 

var belt; 
function detectElement(arrow) { 
    belt = arrow.siblings('.childINeedToSelect').eq(0); 
    belt.css("background-color", "red"); 
}

來源

2012-10-21 01:53:13

試着這麼做

jQuery('.a').children().first().click(function(){ 
jQuery('.childINeedToSelect').attr('background-color','red'); 
)}

來源

2012-10-21 07:55:47 Franky

如何通過點擊jQuery中同一父母的另一個子div來選擇一個子div？

回答

相關問題