如何選擇父母使用選擇器

我有一個動態懸停根據隱藏元素是否存在被激活。我正在更新我的代碼以合併動態創建的元素，但遇到了問題並且不知道如何選擇父項。如何選擇父母使用選擇器

以前我用$(".infotip").parent().hover但已更新爲：

$(document).on("mouseenter", ".parent-selector", function() { 
    $(this).find(".infotip").addClass("active"); 
}); 
$(document).on("mouseleave", ".parent-selector", function() { 
    $(this).find(".infotip").removeClass("active"); 
});

所以需要採取什麼是我需要".parent-selector"表現得像$(".infotip").parent()

來源

2016-07-05 DCdaz

試着給父母上課 –

@JoãoPedro這不是一個選項。正如我在答覆中所說的那樣，它是動態的，可能無法控制父母。 – DCdaz

你能否用你的html代碼添加一個例子來完全理解你想要實現的功能。 – andybeli

由於內容是動態的，並且您提到您不能在創建父級時向其添加類，所以我認爲可以這樣做的唯一方法是觀察添加的任何新元素，然後綁定你的活動。

此功能將定期查找.infotip類的任何元素，該類沒有我們的自定義events_bound屬性。如果找到一個，它將添加該屬性，然後將鼠標事件綁定到父項。我已經包含了一個演示動態內容的小提琴。

//check for changes in the dom 
setInterval(function() { 
    $('.infotip:not([events_bound])').each(function() { 
    //add attribute so that we don't re-bind to this element 
    $(this).attr('events_bound', true); 

    //now bind the events to the parent 
    $(this).parent().mouseenter(function() { 
     $(this).find(".infotip").addClass("active"); 
    }) 
    $(this).parent().mouseleave(function() { 
     $(this).find(".infotip").removeClass("active"); 
    }) 
    }); 
}, 500);

https://jsfiddle.net/ybrwv0c8/1/

當然，如果有什麼識別對父母，那最好的辦法是使用一個選擇你的on。舉例來說，如果有一個動態生成的ID與像parent_13835723標準的結構，你可以做一個部分屬性選擇像$('[id^=parent_]')

您可能還可以使用使用jQuery的:has pseudoselector像這樣。但是，這會搜索所有後代中的元素，這可能無法正確工作，具體取決於DOM的結構。

$(document).on("mouseenter", ":has('.infotip')", function() { 
    $(this).children('.infotip').addClass("active"); 
}); 
$(document).on("mouseleave", ":has('.infotip')", function() { 
    $(this).children('.infotip').removeClass("active"); 
});

然而，根據jQuery的文檔這裏http://api.jquery.com/has-selector/：

表達$("div:has(p)")匹配<div>如果<p>存在其後代中的任何地方，不只是作爲一個直接的孩子。

因爲：具有（）是一個jQuery擴展且不部分CSS 說明書，使用查詢：具有（）不能利用由本機DOM querySelectorAll（）方法提供的性能提升。爲了在現代瀏覽器中獲得更好的性能，請改爲使用$( "your-pure-css-selector").has(selector/DOMElement)。

我不確定:has或setInterval方法是否會有更好的性能。

來源

2016-07-05 17:01:39 Joel

嗨喬爾，已經完美謝謝你！我會強調你的回答，表明它有我所追求的。 – DCdaz

如何

$(".infotip").parent().mouseleave(function() { 
    $(this).find(".infotip").addClass("active"); 
}

和

$(".infotip").parent().mouseleave(function() { 
    $(this).find(".infotip").addClass("active"); 
}

參考：https://api.jquery.com/mouseleave/

來源

2016-07-05 16:15:24 kawadhiya21

它必須能夠處理動態生成的內容。 – DCdaz

就這麼簡單

jQuery(".child").parent().on('mouseenter', function(){ 
    jQuery(this).css('background', '#f00'); 
}); 
jQuery(".child").parent().on('mouseleave', function(){ 
    jQuery(this).css('background', '#0ff'); 
});

DEMO

編輯： - 基於進一步澄清，

當你創建它們，您可以將事件的對象。如果您在不同時間將相同的事件綁定到多個對象，只需創建一個命名函數。

一個非常骯髒的黑客將解除綁定並重新綁定的事件每次元素的hirerchy被添加到DOM。

喜歡的東西

var init = function() { 
    jQuery(".child").parent().off().on('mouseenter', function(){ 
    jQuery(this).css('background', '#f00'); 
    }); 
    jQuery(".child").parent().off().on('mouseleave', function(){ 
    jQuery(this).css('background', '#0ff'); 
    }); 
};

只要調用方法init每次你添加一些東西到DOM。

來源

2016-07-05 16:24:42

感謝Mohd，但如前所述，我需要能夠補償動態創建的內容。所以我必須在選擇器內。 – DCdaz

您可以使用jQuery's custom :has selector：

$('document').on('mouseenter', ':has(.infotip)', function() { 
    $(this).find(".infotip").addClass("active"); 
}); 
$('document').on('mouseleave', ':has(.infotip)', function() { 
    $(this).find(".infotip").addClass("active"); 
});

我沒有測試過這一點，因爲沒有在這個問題提供HTML，但文檔似乎表明它會做你想要什麼。

來源

2016-07-05 16:35:28

如何選擇父母使用選擇器

回答

相關問題